/* ============================================================
CORPSEBLIGHTED — Frostgarde Composers Guild
------------------------------------------------------------
All brand tokens live in :root below. Edit values there to
retheme the entire site without touching individual rules.
============================================================ */
/* === SITE TOKENS — edit here ================================ */
:root {
/* Colors */
--color-bg: #1A1A1D;
--color-surface: #202125;
--color-blue-primary: #16365E;
--color-blue-light: #1E4D8C;
--color-silver-primary: #D8DCE2;
--color-silver-body: #C9CDD3;
--color-silver-muted: #9CA3AC;
--color-silver-subdued: #7A8088;
--color-blue-label: #7FA0C2;
--color-border: #2C2F33;
--color-border-button: #5C6A78;
/* Type */
--font-display: 'Spectral', Georgia, serif;
--font-body: 'Alegreya Sans', 'Inter', -apple-system, sans-serif;
/* Layout */
--container-max: 1220px;
--container-narrow-max: 820px;
--nav-height: 64px;
--logo-size: 150px; /* rendered emblem width */
--arch-width: calc(var(--logo-size) + 52px); /* arch = logo + breathing room */
--arch-overhang: 52px; /* how far the arch hangs below the nav */
/* Motion */
--ease: cubic-bezier(0.25, 0.6, 0.3, 1);
}
/* === RESET =================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background-color: var(--color-bg);
color: var(--color-silver-body);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* Background texture — two layers:
1. body::before — real material texture (images/bg_texture.jpg),
fixed, soft-light blended. Strength knob: its opacity.
2. body::after — fine procedural grain for close-range grit. */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
opacity: 0.5;
mix-blend-mode: soft-light;
background-image: url("../images/bg_texture.jpg");
background-size: cover;
background-position: center;
}
body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
opacity: 0.07;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='260'%20height='260'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.75'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
main { position: relative; z-index: 2; }
/* === SITE LOADER ============================================== */
.site-loader {
position: fixed;
inset: 0;
z-index: 400;
background: var(--color-bg);
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.55s var(--ease), visibility 0.55s;
}
.site-loader img {
width: 110px;
height: auto;
opacity: 0;
animation: loader-emblem 0.9s var(--ease) 0.1s forwards;
}
@keyframes loader-emblem {
to { opacity: 0.92; }
}
.site-loader.done {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.site-loader img { animation: none; opacity: 0.92; }
.site-loader { transition: opacity 0.2s, visibility 0.2s; }
}
/* === PAGE FRAME =============================================== */
/* Fixed picture-frame around the viewport; scrolls with nothing.
Sits above all content (thin lines + corners only, no pointer
interference). Ancient-cold register: steel line, blue ornaments. */
.page-frame {
position: fixed;
inset: 12px;
/* corners only — no full border square */
pointer-events: none;
z-index: 200;
}
.corner {
position: absolute;
width: 62px;
height: 62px;
color: var(--color-blue-label);
opacity: 0.38;
}
.corner.tl { top: -1px; left: -1px; }
.corner.tr { top: -1px; right: -1px; transform: rotate(90deg); }
.corner.br { bottom: -1px; right: -1px; transform: rotate(180deg); }
.corner.bl { bottom: -1px; left: -1px; transform: rotate(270deg); }
/* === LAYOUT HELPERS ========================================== */
.container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 28px;
}
.container-narrow { max-width: var(--container-narrow-max); }
.section { padding: 72px 0; position: relative; scroll-margin-top: calc(var(--nav-height) + 8px); }
/* Grit-and-tear section transitions — desktop only. A generated
fracture line with debris specks marking each section's top edge.
Meant to read as worn material, not as an ornament. Strength knob:
the opacity below. */
@media (min-width: 900px) {
.section::before {
content: "";
position: absolute;
top: -10px;
left: 0;
right: 0;
height: 20px;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%271400%27%20height=%2720%27%3E%3Cpath%20d=%27M0%2010%20L30%2014%20L55%208%20L101%209%20L137%2013%20L172%2013%20L202%206%20L244%2012%20L283%206%20L315%208%20L337%2014%20L360%2013%20L398%206%20L419%206%20L450%2013%20L494%2012%20L514%2014%20L555%2011%20L577%206%20L598%207%20L620%208%20L639%2013%20L667%2012%20L704%206%20L741%208%20L772%206%20L799%209%20L821%207%20L860%207%20L891%206%20L930%2011%20L975%209%20L1000%206%20L1020%208%20L1040%2011%20L1081%209%20L1112%2013%20L1147%206%20L1193%206%20L1231%2011%20L1259%208%20L1281%207%20L1321%206%20L1362%207%20L1380%208%20L1400%2010%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%271%27%20opacity=%270.55%27/%3E%3Cpath%20d=%27M886%204%20L914%206%20L929%203%20L948%206%20L971%206%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.7%27%20opacity=%270.4%27/%3E%3Cpath%20d=%27M880%2016%20L900%2015%20L919%2017%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.7%27%20opacity=%270.4%27/%3E%3Cpath%20d=%27M812%2015%20L836%2016%20L862%2013%20L880%2014%20L898%2013%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.7%27%20opacity=%270.4%27/%3E%3Cpath%20d=%27M501%205%20L520%203%20L539%204%20L566%206%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.7%27%20opacity=%270.4%27/%3E%3Cpath%20d=%27M289%205%20L304%207%20L322%207%20L346%206%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.7%27%20opacity=%270.4%27/%3E%3Cpath%20d=%27M594%2015%20L611%2014%20L627%2014%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.7%27%20opacity=%270.4%27/%3E%3Cpath%20d=%27M882%204%20L910%205%20L928%206%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.7%27%20opacity=%270.4%27/%3E%3Crect%20x=%27650%27%20y=%2714%27%20width=%271%27%20height=%271%27%20transform=%27rotate(29%20650%2014)%27%20fill=%27%235C6A78%27%20opacity=%270.29%27/%3E%3Crect%20x=%27271%27%20y=%2714%27%20width=%272.2%27%20height=%272.2%27%20transform=%27rotate(62%20271%2014)%27%20fill=%27%235C6A78%27%20opacity=%270.41%27/%3E%3Crect%20x=%27509%27%20y=%274%27%20width=%272.2%27%20height=%272.2%27%20transform=%27rotate(61%20509%204)%27%20fill=%27%235C6A78%27%20opacity=%270.36%27/%3E%3Crect%20x=%27393%27%20y=%2717%27%20width=%271.4%27%20height=%271.4%27%20transform=%27rotate(72%20393%2017)%27%20fill=%27%235C6A78%27%20opacity=%270.23%27/%3E%3Ccircle%20cx=%27788%27%20cy=%273%27%20r=%271.1%27%20fill=%27%235C6A78%27%20opacity=%270.49%27/%3E%3Crect%20x=%271115%27%20y=%273%27%20width=%271%27%20height=%271%27%20transform=%27rotate(46%201115%203)%27%20fill=%27%235C6A78%27%20opacity=%270.34%27/%3E%3Crect%20x=%271207%27%20y=%275%27%20width=%271.8%27%20height=%271.8%27%20transform=%27rotate(78%201207%205)%27%20fill=%27%235C6A78%27%20opacity=%270.5%27/%3E%3Ccircle%20cx=%271072%27%20cy=%2716%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.21%27/%3E%3Crect%20x=%27788%27%20y=%273%27%20width=%271%27%20height=%271%27%20transform=%27rotate(3%20788%203)%27%20fill=%27%235C6A78%27%20opacity=%270.49%27/%3E%3Crect%20x=%271160%27%20y=%277%27%20width=%271%27%20height=%271%27%20transform=%27rotate(67%201160%207)%27%20fill=%27%235C6A78%27%20opacity=%270.34%27/%3E%3Crect%20x=%27690%27%20y=%2713%27%20width=%272.2%27%20height=%272.2%27%20transform=%27rotate(72%20690%2013)%27%20fill=%27%235C6A78%27%20opacity=%270.44%27/%3E%3Crect%20x=%271121%27%20y=%273%27%20width=%271%27%20height=%271%27%20transform=%27rotate(11%201121%203)%27%20fill=%27%235C6A78%27%20opacity=%270.33%27/%3E%3Crect%20x=%271369%27%20y=%2717%27%20width=%271%27%20height=%271%27%20transform=%27rotate(49%201369%2017)%27%20fill=%27%235C6A78%27%20opacity=%270.45%27/%3E%3Ccircle%20cx=%27156%27%20cy=%277%27%20r=%270.7%27%20fill=%27%235C6A78%27%20opacity=%270.43%27/%3E%3Crect%20x=%27782%27%20y=%277%27%20width=%271%27%20height=%271%27%20transform=%27rotate(44%20782%207)%27%20fill=%27%235C6A78%27%20opacity=%270.23%27/%3E%3Ccircle%20cx=%27348%27%20cy=%2717%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.29%27/%3E%3Ccircle%20cx=%27153%27%20cy=%273%27%20r=%270.7%27%20fill=%27%235C6A78%27%20opacity=%270.31%27/%3E%3Crect%20x=%27682%27%20y=%273%27%20width=%271%27%20height=%271%27%20transform=%27rotate(88%20682%203)%27%20fill=%27%235C6A78%27%20opacity=%270.22%27/%3E%3Crect%20x=%27262%27%20y=%273%27%20width=%271%27%20height=%271%27%20transform=%27rotate(35%20262%203)%27%20fill=%27%235C6A78%27%20opacity=%270.54%27/%3E%3Ccircle%20cx=%27728%27%20cy=%275%27%20r=%270.9%27%20fill=%27%235C6A78%27%20opacity=%270.47%27/%3E%3Ccircle%20cx=%27847%27%20cy=%2717%27%20r=%270.7%27%20fill=%27%235C6A78%27%20opacity=%270.43%27/%3E%3Crect%20x=%27577%27%20y=%2713%27%20width=%271%27%20height=%271%27%20transform=%27rotate(3%20577%2013)%27%20fill=%27%235C6A78%27%20opacity=%270.52%27/%3E%3Ccircle%20cx=%27584%27%20cy=%277%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.27%27/%3E%3Crect%20x=%27596%27%20y=%2714%27%20width=%271.4%27%20height=%271.4%27%20transform=%27rotate(36%20596%2014)%27%20fill=%27%235C6A78%27%20opacity=%270.52%27/%3E%3Crect%20x=%27209%27%20y=%274%27%20width=%271.4%27%20height=%271.4%27%20transform=%27rotate(51%20209%204)%27%20fill=%27%235C6A78%27%20opacity=%270.55%27/%3E%3Ccircle%20cx=%271135%27%20cy=%277%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.33%27/%3E%3Crect%20x=%27785%27%20y=%2716%27%20width=%272.2%27%20height=%272.2%27%20transform=%27rotate(83%20785%2016)%27%20fill=%27%235C6A78%27%20opacity=%270.53%27/%3E%3Ccircle%20cx=%27472%27%20cy=%273%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.22%27/%3E%3Crect%20x=%2763%27%20y=%275%27%20width=%271.8%27%20height=%271.8%27%20transform=%27rotate(72%2063%205)%27%20fill=%27%235C6A78%27%20opacity=%270.35%27/%3E%3Ccircle%20cx=%271169%27%20cy=%2717%27%20r=%271.1%27%20fill=%27%235C6A78%27%20opacity=%270.22%27/%3E%3Ccircle%20cx=%27265%27%20cy=%2716%27%20r=%270.9%27%20fill=%27%235C6A78%27%20opacity=%270.43%27/%3E%3Ccircle%20cx=%27207%27%20cy=%273%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.53%27/%3E%3Crect%20x=%27945%27%20y=%2716%27%20width=%271.8%27%20height=%271.8%27%20transform=%27rotate(79%20945%2016)%27%20fill=%27%235C6A78%27%20opacity=%270.29%27/%3E%3Crect%20x=%271284%27%20y=%274%27%20width=%272.2%27%20height=%272.2%27%20transform=%27rotate(25%201284%204)%27%20fill=%27%235C6A78%27%20opacity=%270.34%27/%3E%3Ccircle%20cx=%27778%27%20cy=%2713%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.51%27/%3E%3Ccircle%20cx=%271066%27%20cy=%275%27%20r=%270.7%27%20fill=%27%235C6A78%27%20opacity=%270.27%27/%3E%3Ccircle%20cx=%271322%27%20cy=%2714%27%20r=%270.7%27%20fill=%27%235C6A78%27%20opacity=%270.37%27/%3E%3Ccircle%20cx=%27521%27%20cy=%277%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.26%27/%3E%3Crect%20x=%27187%27%20y=%274%27%20width=%271.4%27%20height=%271.4%27%20transform=%27rotate(31%20187%204)%27%20fill=%27%235C6A78%27%20opacity=%270.53%27/%3E%3Crect%20x=%27377%27%20y=%275%27%20width=%271.4%27%20height=%271.4%27%20transform=%27rotate(0%20377%205)%27%20fill=%27%235C6A78%27%20opacity=%270.25%27/%3E%3Ccircle%20cx=%271031%27%20cy=%274%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.23%27/%3E%3Ccircle%20cx=%27248%27%20cy=%2715%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.23%27/%3E%3Crect%20x=%27767%27%20y=%276%27%20width=%271%27%20height=%271%27%20transform=%27rotate(20%20767%206)%27%20fill=%27%235C6A78%27%20opacity=%270.25%27/%3E%3Crect%20x=%27159%27%20y=%275%27%20width=%271.8%27%20height=%271.8%27%20transform=%27rotate(61%20159%205)%27%20fill=%27%235C6A78%27%20opacity=%270.28%27/%3E%3Ccircle%20cx=%27467%27%20cy=%2714%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.32%27/%3E%3Crect%20x=%271038%27%20y=%2715%27%20width=%271.8%27%20height=%271.8%27%20transform=%27rotate(49%201038%2015)%27%20fill=%27%235C6A78%27%20opacity=%270.37%27/%3E%3Crect%20x=%271298%27%20y=%2714%27%20width=%271%27%20height=%271%27%20transform=%27rotate(19%201298%2014)%27%20fill=%27%235C6A78%27%20opacity=%270.53%27/%3E%3Crect%20x=%27613%27%20y=%2716%27%20width=%271.8%27%20height=%271.8%27%20transform=%27rotate(61%20613%2016)%27%20fill=%27%235C6A78%27%20opacity=%270.36%27/%3E%3Crect%20x=%27673%27%20y=%276%27%20width=%271%27%20height=%271%27%20transform=%27rotate(37%20673%206)%27%20fill=%27%235C6A78%27%20opacity=%270.32%27/%3E%3Crect%20x=%27609%27%20y=%2714%27%20width=%271%27%20height=%271%27%20transform=%27rotate(0%20609%2014)%27%20fill=%27%235C6A78%27%20opacity=%270.54%27/%3E%3Ccircle%20cx=%271075%27%20cy=%2713%27%20r=%271.1%27%20fill=%27%235C6A78%27%20opacity=%270.36%27/%3E%3Ccircle%20cx=%271233%27%20cy=%2716%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.41%27/%3E%3Crect%20x=%27489%27%20y=%274%27%20width=%272.2%27%20height=%272.2%27%20transform=%27rotate(16%20489%204)%27%20fill=%27%235C6A78%27%20opacity=%270.35%27/%3E%3Ccircle%20cx=%271147%27%20cy=%274%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.47%27/%3E%3Crect%20x=%27418%27%20y=%2716%27%20width=%271.4%27%20height=%271.4%27%20transform=%27rotate(53%20418%2016)%27%20fill=%27%235C6A78%27%20opacity=%270.54%27/%3E%3Crect%20x=%27964%27%20y=%2714%27%20width=%271.4%27%20height=%271.4%27%20transform=%27rotate(38%20964%2014)%27%20fill=%27%235C6A78%27%20opacity=%270.34%27/%3E%3Ccircle%20cx=%27430%27%20cy=%2715%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.5%27/%3E%3Ccircle%20cx=%27370%27%20cy=%273%27%20r=%270.7%27%20fill=%27%235C6A78%27%20opacity=%270.4%27/%3E%3Crect%20x=%27137%27%20y=%2717%27%20width=%271%27%20height=%271%27%20transform=%27rotate(53%20137%2017)%27%20fill=%27%235C6A78%27%20opacity=%270.39%27/%3E%3Crect%20x=%27591%27%20y=%275%27%20width=%272.2%27%20height=%272.2%27%20transform=%27rotate(14%20591%205)%27%20fill=%27%235C6A78%27%20opacity=%270.36%27/%3E%3Crect%20x=%27507%27%20y=%2717%27%20width=%272.2%27%20height=%272.2%27%20transform=%27rotate(18%20507%2017)%27%20fill=%27%235C6A78%27%20opacity=%270.47%27/%3E%3Ccircle%20cx=%27650%27%20cy=%273%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.43%27/%3E%3Crect%20x=%271375%27%20y=%2713%27%20width=%272.2%27%20height=%272.2%27%20transform=%27rotate(59%201375%2013)%27%20fill=%27%235C6A78%27%20opacity=%270.21%27/%3E%3Crect%20x=%27709%27%20y=%2714%27%20width=%271.4%27%20height=%271.4%27%20transform=%27rotate(8%20709%2014)%27%20fill=%27%235C6A78%27%20opacity=%270.33%27/%3E%3Ccircle%20cx=%271189%27%20cy=%276%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.2%27/%3E%3Ccircle%20cx=%2751%27%20cy=%274%27%20r=%270.9%27%20fill=%27%235C6A78%27%20opacity=%270.24%27/%3E%3Crect%20x=%271264%27%20y=%277%27%20width=%271%27%20height=%271%27%20transform=%27rotate(68%201264%207)%27%20fill=%27%235C6A78%27%20opacity=%270.37%27/%3E%3Crect%20x=%271312%27%20y=%274%27%20width=%271%27%20height=%271%27%20transform=%27rotate(85%201312%204)%27%20fill=%27%235C6A78%27%20opacity=%270.42%27/%3E%3Crect%20x=%27410%27%20y=%2713%27%20width=%271%27%20height=%271%27%20transform=%27rotate(49%20410%2013)%27%20fill=%27%235C6A78%27%20opacity=%270.44%27/%3E%3Crect%20x=%27296%27%20y=%275%27%20width=%271%27%20height=%271%27%20transform=%27rotate(4%20296%205)%27%20fill=%27%235C6A78%27%20opacity=%270.47%27/%3E%3C/svg%3E");
background-repeat: repeat-x;
background-position: center;
opacity: 0.3;
}
}
/* Footer transition: same technique, a rougher variant — slightly
more debris since it's the last tear on the page. */
@media (min-width: 900px) {
.footer::before {
content: "";
position: absolute;
top: -10px;
left: 0;
right: 0;
height: 20px;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%271400%27%20height=%2720%27%3E%3Cpath%20d=%27M0%2010%20L24%208%20L67%2015%20L111%205%20L147%205%20L182%205%20L200%2014%20L229%205%20L249%2012%20L282%206%20L326%2015%20L351%2014%20L374%2014%20L416%208%20L451%2013%20L474%206%20L499%2016%20L534%207%20L554%207%20L575%206%20L610%204%20L636%2016%20L656%205%20L688%206%20L731%2013%20L754%205%20L790%207%20L824%2013%20L853%206%20L893%2016%20L918%205%20L940%205%20L985%207%20L1018%205%20L1054%204%20L1087%205%20L1128%205%20L1163%2012%20L1204%208%20L1250%206%20L1269%204%20L1287%205%20L1322%2016%20L1357%204%20L1380%2013%20L1400%2010%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%271%27%20opacity=%270.6%27/%3E%3Cpath%20d=%27M1162%2016%20L1185%2015%20L1211%2014%20L1234%2017%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.7%27%20opacity=%270.34%27/%3E%3Cpath%20d=%27M136%205%20L153%206%20L174%203%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.7%27%20opacity=%270.38%27/%3E%3Cpath%20d=%27M1074%204%20L1092%206%20L1106%202%20L1135%206%20L1147%206%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.7%27%20opacity=%270.32%27/%3E%3Cpath%20d=%27M122%205%20L143%203%20L158%206%20L182%204%20L205%203%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.7%27%20opacity=%270.38%27/%3E%3Cpath%20d=%27M369%2016%20L381%2015%20L407%2015%20L435%2018%20L447%2015%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.7%27%20opacity=%270.3%27/%3E%3Cpath%20d=%27M1006%205%20L1030%206%20L1047%204%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.7%27%20opacity=%270.47%27/%3E%3Cpath%20d=%27M105%204%20L123%205%20L137%206%20L157%203%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.7%27%20opacity=%270.28%27/%3E%3Cpath%20d=%27M598%2015%20L614%2013%20L630%2014%20L655%2014%20L676%2013%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.7%27%20opacity=%270.4%27/%3E%3Cpath%20d=%27M557%205%20L572%204%20L591%204%20L616%203%20L643%207%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.7%27%20opacity=%270.35%27/%3E%3Cpath%20d=%27M358%2016%20L388%2018%20L417%2018%20L438%2018%20L462%2018%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.7%27%20opacity=%270.38%27/%3E%3Ccircle%20cx=%271271%27%20cy=%275%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.3%27/%3E%3Crect%20x=%271203%27%20y=%2716%27%20width=%271.8%27%20height=%271.8%27%20transform=%27rotate(23%201203%2016)%27%20fill=%27%235C6A78%27%20opacity=%270.45%27/%3E%3Crect%20x=%27446%27%20y=%2716%27%20width=%271%27%20height=%271%27%20transform=%27rotate(89%20446%2016)%27%20fill=%27%235C6A78%27%20opacity=%270.3%27/%3E%3Crect%20x=%271061%27%20y=%273%27%20width=%271.4%27%20height=%271.4%27%20transform=%27rotate(12%201061%203)%27%20fill=%27%235C6A78%27%20opacity=%270.43%27/%3E%3Crect%20x=%271320%27%20y=%2718%27%20width=%271%27%20height=%271%27%20transform=%27rotate(13%201320%2018)%27%20fill=%27%235C6A78%27%20opacity=%270.45%27/%3E%3Ccircle%20cx=%271055%27%20cy=%2716%27%20r=%270.7%27%20fill=%27%235C6A78%27%20opacity=%270.47%27/%3E%3Ccircle%20cx=%271053%27%20cy=%2713%27%20r=%271.3%27%20fill=%27%235C6A78%27%20opacity=%270.32%27/%3E%3Crect%20x=%27944%27%20y=%2713%27%20width=%272.2%27%20height=%272.2%27%20transform=%27rotate(35%20944%2013)%27%20fill=%27%235C6A78%27%20opacity=%270.16%27/%3E%3Crect%20x=%271058%27%20y=%2714%27%20width=%271%27%20height=%271%27%20transform=%27rotate(50%201058%2014)%27%20fill=%27%235C6A78%27%20opacity=%270.49%27/%3E%3Ccircle%20cx=%271011%27%20cy=%2717%27%20r=%270.9%27%20fill=%27%235C6A78%27%20opacity=%270.27%27/%3E%3Ccircle%20cx=%27436%27%20cy=%277%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.27%27/%3E%3Crect%20x=%271073%27%20y=%2714%27%20width=%271%27%20height=%271%27%20transform=%27rotate(66%201073%2014)%27%20fill=%27%235C6A78%27%20opacity=%270.17%27/%3E%3Crect%20x=%27552%27%20y=%273%27%20width=%272.2%27%20height=%272.2%27%20transform=%27rotate(38%20552%203)%27%20fill=%27%235C6A78%27%20opacity=%270.4%27/%3E%3Crect%20x=%27579%27%20y=%273%27%20width=%271%27%20height=%271%27%20transform=%27rotate(88%20579%203)%27%20fill=%27%235C6A78%27%20opacity=%270.25%27/%3E%3Ccircle%20cx=%27381%27%20cy=%277%27%20r=%271.1%27%20fill=%27%235C6A78%27%20opacity=%270.16%27/%3E%3Ccircle%20cx=%27509%27%20cy=%2717%27%20r=%271.1%27%20fill=%27%235C6A78%27%20opacity=%270.36%27/%3E%3Crect%20x=%271009%27%20y=%2717%27%20width=%271.8%27%20height=%271.8%27%20transform=%27rotate(54%201009%2017)%27%20fill=%27%235C6A78%27%20opacity=%270.36%27/%3E%3Crect%20x=%27488%27%20y=%275%27%20width=%271.8%27%20height=%271.8%27%20transform=%27rotate(45%20488%205)%27%20fill=%27%235C6A78%27%20opacity=%270.5%27/%3E%3Crect%20x=%271089%27%20y=%272%27%20width=%272.2%27%20height=%272.2%27%20transform=%27rotate(18%201089%202)%27%20fill=%27%235C6A78%27%20opacity=%270.22%27/%3E%3Ccircle%20cx=%27591%27%20cy=%2716%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.39%27/%3E%3Crect%20x=%27851%27%20y=%2713%27%20width=%272.2%27%20height=%272.2%27%20transform=%27rotate(40%20851%2013)%27%20fill=%27%235C6A78%27%20opacity=%270.42%27/%3E%3Ccircle%20cx=%27442%27%20cy=%2713%27%20r=%271.1%27%20fill=%27%235C6A78%27%20opacity=%270.2%27/%3E%3Crect%20x=%27392%27%20y=%277%27%20width=%271%27%20height=%271%27%20transform=%27rotate(19%20392%207)%27%20fill=%27%235C6A78%27%20opacity=%270.2%27/%3E%3Crect%20x=%2747%27%20y=%2715%27%20width=%271%27%20height=%271%27%20transform=%27rotate(9%2047%2015)%27%20fill=%27%235C6A78%27%20opacity=%270.2%27/%3E%3Ccircle%20cx=%2778%27%20cy=%2717%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.32%27/%3E%3Crect%20x=%27783%27%20y=%273%27%20width=%271%27%20height=%271%27%20transform=%27rotate(58%20783%203)%27%20fill=%27%235C6A78%27%20opacity=%270.17%27/%3E%3Ccircle%20cx=%27689%27%20cy=%273%27%20r=%271.3%27%20fill=%27%235C6A78%27%20opacity=%270.46%27/%3E%3Crect%20x=%27656%27%20y=%2714%27%20width=%272.2%27%20height=%272.2%27%20transform=%27rotate(84%20656%2014)%27%20fill=%27%235C6A78%27%20opacity=%270.27%27/%3E%3Ccircle%20cx=%27194%27%20cy=%2717%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.27%27/%3E%3Crect%20x=%27853%27%20y=%274%27%20width=%272.6%27%20height=%272.6%27%20transform=%27rotate(82%20853%204)%27%20fill=%27%235C6A78%27%20opacity=%270.17%27/%3E%3Crect%20x=%27278%27%20y=%272%27%20width=%271%27%20height=%271%27%20transform=%27rotate(70%20278%202)%27%20fill=%27%235C6A78%27%20opacity=%270.48%27/%3E%3Crect%20x=%27884%27%20y=%275%27%20width=%272.2%27%20height=%272.2%27%20transform=%27rotate(10%20884%205)%27%20fill=%27%235C6A78%27%20opacity=%270.28%27/%3E%3Ccircle%20cx=%27999%27%20cy=%275%27%20r=%270.9%27%20fill=%27%235C6A78%27%20opacity=%270.17%27/%3E%3Ccircle%20cx=%2781%27%20cy=%2714%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.47%27/%3E%3Crect%20x=%27118%27%20y=%274%27%20width=%271.4%27%20height=%271.4%27%20transform=%27rotate(80%20118%204)%27%20fill=%27%235C6A78%27%20opacity=%270.22%27/%3E%3Ccircle%20cx=%27932%27%20cy=%276%27%20r=%270.7%27%20fill=%27%235C6A78%27%20opacity=%270.21%27/%3E%3Crect%20x=%27709%27%20y=%272%27%20width=%271.8%27%20height=%271.8%27%20transform=%27rotate(79%20709%202)%27%20fill=%27%235C6A78%27%20opacity=%270.28%27/%3E%3Crect%20x=%27702%27%20y=%2715%27%20width=%272.2%27%20height=%272.2%27%20transform=%27rotate(0%20702%2015)%27%20fill=%27%235C6A78%27%20opacity=%270.44%27/%3E%3Crect%20x=%271063%27%20y=%2715%27%20width=%272.2%27%20height=%272.2%27%20transform=%27rotate(37%201063%2015)%27%20fill=%27%235C6A78%27%20opacity=%270.46%27/%3E%3Crect%20x=%271239%27%20y=%2718%27%20width=%271.8%27%20height=%271.8%27%20transform=%27rotate(81%201239%2018)%27%20fill=%27%235C6A78%27%20opacity=%270.31%27/%3E%3Crect%20x=%27650%27%20y=%2717%27%20width=%271.4%27%20height=%271.4%27%20transform=%27rotate(52%20650%2017)%27%20fill=%27%235C6A78%27%20opacity=%270.45%27/%3E%3Ccircle%20cx=%271157%27%20cy=%277%27%20r=%270.7%27%20fill=%27%235C6A78%27%20opacity=%270.34%27/%3E%3Crect%20x=%27919%27%20y=%276%27%20width=%271.4%27%20height=%271.4%27%20transform=%27rotate(78%20919%206)%27%20fill=%27%235C6A78%27%20opacity=%270.47%27/%3E%3Ccircle%20cx=%27505%27%20cy=%277%27%20r=%271.3%27%20fill=%27%235C6A78%27%20opacity=%270.18%27/%3E%3Ccircle%20cx=%271215%27%20cy=%273%27%20r=%270.9%27%20fill=%27%235C6A78%27%20opacity=%270.26%27/%3E%3Crect%20x=%271105%27%20y=%276%27%20width=%271.8%27%20height=%271.8%27%20transform=%27rotate(26%201105%206)%27%20fill=%27%235C6A78%27%20opacity=%270.41%27/%3E%3Crect%20x=%27904%27%20y=%2714%27%20width=%272.6%27%20height=%272.6%27%20transform=%27rotate(66%20904%2014)%27%20fill=%27%235C6A78%27%20opacity=%270.21%27/%3E%3Ccircle%20cx=%27884%27%20cy=%273%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.44%27/%3E%3Ccircle%20cx=%271117%27%20cy=%2718%27%20r=%271.1%27%20fill=%27%235C6A78%27%20opacity=%270.22%27/%3E%3Ccircle%20cx=%27239%27%20cy=%2717%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.28%27/%3E%3Ccircle%20cx=%27854%27%20cy=%275%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.38%27/%3E%3Ccircle%20cx=%27825%27%20cy=%274%27%20r=%271.3%27%20fill=%27%235C6A78%27%20opacity=%270.29%27/%3E%3Ccircle%20cx=%27298%27%20cy=%2718%27%20r=%270.9%27%20fill=%27%235C6A78%27%20opacity=%270.39%27/%3E%3Ccircle%20cx=%271378%27%20cy=%275%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.19%27/%3E%3Ccircle%20cx=%271211%27%20cy=%2713%27%20r=%271.1%27%20fill=%27%235C6A78%27%20opacity=%270.23%27/%3E%3Crect%20x=%271195%27%20y=%276%27%20width=%271%27%20height=%271%27%20transform=%27rotate(90%201195%206)%27%20fill=%27%235C6A78%27%20opacity=%270.41%27/%3E%3Crect%20x=%271369%27%20y=%272%27%20width=%271%27%20height=%271%27%20transform=%27rotate(26%201369%202)%27%20fill=%27%235C6A78%27%20opacity=%270.36%27/%3E%3Crect%20x=%27510%27%20y=%2718%27%20width=%272.6%27%20height=%272.6%27%20transform=%27rotate(15%20510%2018)%27%20fill=%27%235C6A78%27%20opacity=%270.37%27/%3E%3Ccircle%20cx=%271336%27%20cy=%2715%27%20r=%270.9%27%20fill=%27%235C6A78%27%20opacity=%270.24%27/%3E%3Ccircle%20cx=%27511%27%20cy=%276%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.3%27/%3E%3Crect%20x=%27776%27%20y=%275%27%20width=%272.2%27%20height=%272.2%27%20transform=%27rotate(66%20776%205)%27%20fill=%27%235C6A78%27%20opacity=%270.4%27/%3E%3Crect%20x=%271272%27%20y=%2715%27%20width=%271%27%20height=%271%27%20transform=%27rotate(56%201272%2015)%27%20fill=%27%235C6A78%27%20opacity=%270.34%27/%3E%3Ccircle%20cx=%27197%27%20cy=%2718%27%20r=%271.1%27%20fill=%27%235C6A78%27%20opacity=%270.2%27/%3E%3Ccircle%20cx=%2787%27%20cy=%274%27%20r=%271.1%27%20fill=%27%235C6A78%27%20opacity=%270.42%27/%3E%3Ccircle%20cx=%27723%27%20cy=%275%27%20r=%271.1%27%20fill=%27%235C6A78%27%20opacity=%270.41%27/%3E%3Ccircle%20cx=%27751%27%20cy=%276%27%20r=%270.9%27%20fill=%27%235C6A78%27%20opacity=%270.39%27/%3E%3Crect%20x=%27805%27%20y=%276%27%20width=%272.6%27%20height=%272.6%27%20transform=%27rotate(31%20805%206)%27%20fill=%27%235C6A78%27%20opacity=%270.26%27/%3E%3Ccircle%20cx=%27116%27%20cy=%275%27%20r=%271.3%27%20fill=%27%235C6A78%27%20opacity=%270.4%27/%3E%3Crect%20x=%271085%27%20y=%273%27%20width=%272.2%27%20height=%272.2%27%20transform=%27rotate(89%201085%203)%27%20fill=%27%235C6A78%27%20opacity=%270.2%27/%3E%3Ccircle%20cx=%27828%27%20cy=%273%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.3%27/%3E%3Crect%20x=%27427%27%20y=%275%27%20width=%271.8%27%20height=%271.8%27%20transform=%27rotate(78%20427%205)%27%20fill=%27%235C6A78%27%20opacity=%270.47%27/%3E%3Ccircle%20cx=%27585%27%20cy=%274%27%20r=%270.9%27%20fill=%27%235C6A78%27%20opacity=%270.15%27/%3E%3Crect%20x=%27124%27%20y=%2714%27%20width=%271%27%20height=%271%27%20transform=%27rotate(67%20124%2014)%27%20fill=%27%235C6A78%27%20opacity=%270.33%27/%3E%3Crect%20x=%27609%27%20y=%2713%27%20width=%271.8%27%20height=%271.8%27%20transform=%27rotate(76%20609%2013)%27%20fill=%27%235C6A78%27%20opacity=%270.28%27/%3E%3Crect%20x=%27209%27%20y=%277%27%20width=%271.8%27%20height=%271.8%27%20transform=%27rotate(7%20209%207)%27%20fill=%27%235C6A78%27%20opacity=%270.21%27/%3E%3Crect%20x=%271267%27%20y=%2717%27%20width=%271%27%20height=%271%27%20transform=%27rotate(48%201267%2017)%27%20fill=%27%235C6A78%27%20opacity=%270.41%27/%3E%3Crect%20x=%271362%27%20y=%274%27%20width=%272.2%27%20height=%272.2%27%20transform=%27rotate(55%201362%204)%27%20fill=%27%235C6A78%27%20opacity=%270.24%27/%3E%3Crect%20x=%27753%27%20y=%2716%27%20width=%271%27%20height=%271%27%20transform=%27rotate(26%20753%2016)%27%20fill=%27%235C6A78%27%20opacity=%270.39%27/%3E%3Crect%20x=%271034%27%20y=%275%27%20width=%271%27%20height=%271%27%20transform=%27rotate(53%201034%205)%27%20fill=%27%235C6A78%27%20opacity=%270.43%27/%3E%3Crect%20x=%271218%27%20y=%2713%27%20width=%272.2%27%20height=%272.2%27%20transform=%27rotate(88%201218%2013)%27%20fill=%27%235C6A78%27%20opacity=%270.27%27/%3E%3Crect%20x=%27875%27%20y=%273%27%20width=%271%27%20height=%271%27%20transform=%27rotate(85%20875%203)%27%20fill=%27%235C6A78%27%20opacity=%270.19%27/%3E%3Ccircle%20cx=%271186%27%20cy=%273%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.44%27/%3E%3Crect%20x=%27120%27%20y=%277%27%20width=%272.2%27%20height=%272.2%27%20transform=%27rotate(64%20120%207)%27%20fill=%27%235C6A78%27%20opacity=%270.49%27/%3E%3Crect%20x=%2781%27%20y=%2713%27%20width=%271.4%27%20height=%271.4%27%20transform=%27rotate(46%2081%2013)%27%20fill=%27%235C6A78%27%20opacity=%270.32%27/%3E%3Ccircle%20cx=%271238%27%20cy=%277%27%20r=%270.9%27%20fill=%27%235C6A78%27%20opacity=%270.15%27/%3E%3Crect%20x=%27788%27%20y=%2715%27%20width=%272.2%27%20height=%272.2%27%20transform=%27rotate(11%20788%2015)%27%20fill=%27%235C6A78%27%20opacity=%270.31%27/%3E%3Ccircle%20cx=%27996%27%20cy=%2714%27%20r=%271.1%27%20fill=%27%235C6A78%27%20opacity=%270.38%27/%3E%3Ccircle%20cx=%27428%27%20cy=%274%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.25%27/%3E%3Ccircle%20cx=%271081%27%20cy=%2717%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.38%27/%3E%3Ccircle%20cx=%27966%27%20cy=%2716%27%20r=%271.3%27%20fill=%27%235C6A78%27%20opacity=%270.43%27/%3E%3Crect%20x=%27234%27%20y=%2717%27%20width=%271.4%27%20height=%271.4%27%20transform=%27rotate(70%20234%2017)%27%20fill=%27%235C6A78%27%20opacity=%270.48%27/%3E%3Crect%20x=%27176%27%20y=%2718%27%20width=%271.8%27%20height=%271.8%27%20transform=%27rotate(1%20176%2018)%27%20fill=%27%235C6A78%27%20opacity=%270.22%27/%3E%3Ccircle%20cx=%27154%27%20cy=%2718%27%20r=%271.3%27%20fill=%27%235C6A78%27%20opacity=%270.36%27/%3E%3Crect%20x=%27277%27%20y=%2718%27%20width=%271%27%20height=%271%27%20transform=%27rotate(63%20277%2018)%27%20fill=%27%235C6A78%27%20opacity=%270.22%27/%3E%3Crect%20x=%27750%27%20y=%2715%27%20width=%272.6%27%20height=%272.6%27%20transform=%27rotate(35%20750%2015)%27%20fill=%27%235C6A78%27%20opacity=%270.17%27/%3E%3C/svg%3E");
background-repeat: repeat-x;
background-position: center;
opacity: 0.3;
}
}
/* Section-level atmosphere: cold light enters each section from a
different direction, so the page breathes instead of being one
flat charcoal run. */
.section-world {
background: radial-gradient(ellipse 800px 360px at 15% 0%, rgba(30, 77, 140, 0.08), transparent 70%);
}
.section-highlights {
background: radial-gradient(ellipse 800px 360px at 85% 0%, rgba(30, 77, 140, 0.08), transparent 70%);
}
.section-composers {
background:
radial-gradient(ellipse 700px 320px at 10% 100%, rgba(30, 77, 140, 0.06), transparent 70%),
linear-gradient(180deg, transparent 0%, rgba(16, 16, 19, 0.6) 100%);
}
/* Centered section titles for World and Highlights */
.section-world .section-title,
.section-highlights .section-title { text-align: center; }
.section-world .section-title::after,
.section-highlights .section-title::after { margin-left: auto; margin-right: auto; }
.world-cta { text-align: center; }
.section-title {
font-family: var(--font-display);
font-weight: 600;
font-size: 32px;
letter-spacing: -0.01em;
color: var(--color-silver-primary);
margin-bottom: 36px;
}
/* Ornamental rule beneath section titles: line — diamond — line */
.section-title::after {
content: "";
display: block;
width: 150px;
height: 9px;
margin-top: 12px;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='150'%20height='9'%3E%3Cpath%20d='M0%204.5%20H62'%20stroke='%235C6A78'%20stroke-width='1'/%3E%3Crect%20x='71'%20y='1'%20width='7'%20height='7'%20transform='rotate(45%2074.5%204.5)'%20fill='none'%20stroke='%237FA0C2'%20stroke-width='1'/%3E%3Cpath%20d='M88%204.5%20H150'%20stroke='%235C6A78'%20stroke-width='1'/%3E%3C/svg%3E");
background-repeat: no-repeat;
}
.eyebrow {
font-family: var(--font-body);
font-weight: 500;
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-blue-label);
margin-bottom: 16px;
}
/* === NAVIGATION ============================================== */
.nav {
position: fixed; /* out of flow — hero extends beneath */
top: 0;
left: 0;
right: 0;
/* Above the page frame (z 200) so the emblem mounts over it; the
nav is transparent at rest so the frame still shows through */
z-index: 210;
height: var(--nav-height);
background-color: transparent; /* seamless at top of page */
transition: background-color 0.25s var(--ease);
}
.nav.nav-scrolled {
background-color: rgba(26, 26, 29, 0.96);
}
.nav-inner {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 28px;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-side { display: flex; align-items: center; gap: 24px; flex: 1; }
.nav-side-left { justify-content: flex-start; }
.nav-side-right { justify-content: flex-end; }
.nav-link {
white-space: nowrap;
font-family: var(--font-body);
font-weight: 500;
font-size: 14px;
color: var(--color-silver-body);
background: none;
border: none;
cursor: pointer;
padding: 6px 2px;
transition: color 0.2s var(--ease);
}
.nav-link:hover, .nav-link:focus-visible { color: var(--color-silver-primary); }
/* Overhanging arch:
A banner-arch attached to the nav's underside, wide enough for the
emblem plus breathing room, rounding into an arch at the bottom.
Sized from --logo-size so the logo always fits with margin. */
.nav-medallion {
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: var(--arch-width);
height: calc(var(--nav-height) + var(--arch-overhang));
/* Distinct at rest: the arch reads as a mounted plate over the hero */
background-color: rgba(26, 26, 29, 0.96);
border: 1px solid var(--color-border);
border-top: none;
border-radius: 0 0 999px 999px;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
/* optical centering: emblem is top-heavy, so it sits lower than
geometric center */
padding-top: 12px;
padding-bottom: 0;
}
.nav-medallion a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.nav-logo {
pointer-events: none;
width: var(--logo-size);
height: auto;
max-height: calc(100% - 6px);
object-fit: contain;
filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.6));
}
.nav-inner { position: relative; }
/* Give side links breathing room so they never sit under the medallion */
.nav-side-left { padding-right: calc(var(--arch-width) / 2 + 28px); }
.nav-side-right { padding-left: calc(var(--arch-width) / 2 + 28px); }
.nav-buy { color: var(--color-silver-primary); }
/* === DROPDOWN ================================================ */
.dropdown { position: relative; }
.dropdown-toggle { display: inline-flex; align-items: center; gap: 6px; }
.dropdown-caret { font-size: 10px; transform: translateY(1px); transition: transform 0.2s var(--ease); }
.dropdown.open .dropdown-caret { transform: translateY(1px) rotate(180deg); }
.dropdown-menu {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 170px;
background-color: var(--color-surface);
border: 0.5px solid var(--color-border);
border-radius: 2px;
list-style: none;
padding: 6px 0;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
z-index: 110;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.dropdown.open .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-menu a {
display: block;
padding: 9px 16px;
font-family: var(--font-body);
font-size: 13px;
color: var(--color-silver-muted);
transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.dropdown-menu a:hover, .dropdown-menu a:focus-visible {
color: var(--color-silver-primary);
background-color: rgba(30, 77, 140, 0.15);
}
/* Nav dropdown aligns right so it doesn't overflow viewport */
.nav-side-right .dropdown-menu { left: auto; right: 0; }
/* === HAMBURGER & MOBILE MENU ================================= */
.nav-hamburger {
display: none; /* shown at mobile breakpoint */
margin-left: auto;
width: 42px;
height: 42px;
background: none;
border: none;
cursor: pointer;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
z-index: 102;
}
.nav-hamburger span {
display: block;
width: 19px;
height: 1.5px;
background: var(--color-silver-body);
transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.nav-hamburger.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.active span:nth-child(2) { opacity: 0; }
.nav-hamburger.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.mobile-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: rgba(20, 20, 23, 0.98);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 0.5px solid var(--color-border);
/* clears the arch hanging into the panel */
padding: calc(var(--arch-overhang) + 12px) 24px 16px;
z-index: 99;
}
.mobile-menu.open { display: block; }
.mobile-menu-link {
display: block;
padding: 13px 2px;
font-family: var(--font-body);
font-weight: 500;
font-size: 14px;
color: var(--color-silver-body);
border-bottom: 0.5px solid var(--color-border);
transition: color 0.2s var(--ease);
}
.mobile-menu-link:last-child { border-bottom: none; }
.mobile-menu-link:hover, .mobile-menu-link:focus-visible { color: var(--color-silver-primary); }
.mobile-menu-label {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-blue-label);
padding: 16px 2px 6px;
}
/* === BUTTONS ================================================= */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
line-height: 1;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
text-align: center;
transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
/* Primary CTA — worn-metal blue, engraved label, angled sides.
Hexagonal clip (pointed left/right edges) in the video-game UI
tradition; drop-shadow follows the clipped shape and doubles as
a thin edge glow since CSS borders can't follow clip paths. */
.btn-primary {
position: relative;
font-family: var(--font-display);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.02em;
color: var(--color-silver-body);
background: radial-gradient(ellipse at 30% 20%, #1f4870 0%, #14334f 55%, #0d2438 100%);
border: none;
clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 15px 100%, 0 50%);
padding: 0 34px;
box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.4);
filter: drop-shadow(0 0 0.5px rgba(138, 152, 168, 0.9)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
}
/* Small diamond studs at the left/right points — echoes the site's
open-diamond motif inside the angled shape */
.btn-primary::before {
content: "";
position: absolute;
left: 7px;
top: 50%;
width: 5px;
height: 5px;
transform: translateY(-50%) rotate(45deg);
background: rgba(138, 152, 168, 0.75);
pointer-events: none;
}
.btn-primary::after {
content: "";
position: absolute;
right: 7px;
top: 50%;
width: 5px;
height: 5px;
transform: translateY(-50%) rotate(45deg);
background: rgba(138, 152, 168, 0.75);
pointer-events: none;
}
.btn-primary:disabled {
cursor: default;
animation: btn-pulse 1.1s ease-in-out infinite;
}
@keyframes btn-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
.btn-primary:hover, .btn-primary:focus-visible {
background: radial-gradient(ellipse at 30% 20%, #275a8a 0%, #1E4D8C 55%, #123055 100%);
color: var(--color-silver-primary);
}
/* Secondary — ghost version of the angled primary shape.
The hexagon outline is drawn by a ::before filled with currentColor
and masked to a 1px frame (two pointed end-caps + top/bottom lines),
so the inside stays truly transparent and the outline brightens
with the text color on hover. */
.btn-secondary {
position: relative;
font-family: var(--font-body);
font-weight: 500;
font-size: 14px;
color: var(--color-silver-muted);
background: transparent;
border: none;
padding: 0 30px;
}
.btn-secondary::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: currentColor;
opacity: 0.75;
-webkit-mask-image:
url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2015%2046'%20preserveAspectRatio='none'%3E%3Cpath%20d='M15%200.5%20L0.9%2023%20L15%2045.5'%20fill='none'%20stroke='white'%20stroke-width='1'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2015%2046'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%200.5%20L14.1%2023%20L0%2045.5'%20fill='none'%20stroke='white'%20stroke-width='1'/%3E%3C/svg%3E"),
linear-gradient(#000, #000),
linear-gradient(#000, #000);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: left center, right center, center top, center bottom;
-webkit-mask-size: 15px 100%, 15px 100%, calc(100% - 28px) 1px, calc(100% - 28px) 1px;
mask-image:
url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2015%2046'%20preserveAspectRatio='none'%3E%3Cpath%20d='M15%200.5%20L0.9%2023%20L15%2045.5'%20fill='none'%20stroke='white'%20stroke-width='1'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2015%2046'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%200.5%20L14.1%2023%20L0%2045.5'%20fill='none'%20stroke='white'%20stroke-width='1'/%3E%3C/svg%3E"),
linear-gradient(#000, #000),
linear-gradient(#000, #000);
mask-repeat: no-repeat;
mask-position: left center, right center, center top, center bottom;
mask-size: 15px 100%, 15px 100%, calc(100% - 28px) 1px, calc(100% - 28px) 1px;
}
.btn-secondary:hover, .btn-secondary:focus-visible {
color: var(--color-silver-primary);
}
.btn-secondary:hover::before, .btn-secondary:focus-visible::before { opacity: 1; }
/* Visible focus for keyboard users */
.btn:focus-visible, .nav-link:focus-visible, a:focus-visible {
outline: 2px solid var(--color-blue-label);
outline-offset: 2px;
}
/* === HERO ==================================================== */
.hero {
position: relative;
/* extra top padding accounts for the overhanging seal */
padding: calc(var(--nav-height) + var(--arch-overhang) + 56px) 0 96px;
/* cold glow centered behind the hero copy (left column on desktop) */
background: radial-gradient(ellipse 760px 480px at 28% 38%, rgba(30, 77, 140, 0.14), transparent 70%);
}
.hero-vignette {
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(ellipse at 50% 30%, transparent 50%, rgba(0, 0, 0, 0.4) 100%);
}
.hero-grid {
position: relative;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 48px;
align-items: center;
}
.nowrap { white-space: nowrap; }
.hero-title {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(42px, 5.5vw, 60px);
line-height: 1.12;
letter-spacing: -0.026em;
max-width: 18ch;
color: var(--color-silver-primary);
margin-bottom: 18px;
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}
.hero-sub {
font-size: 17px;
color: var(--color-silver-muted);
max-width: 500px;
margin-bottom: 30px;
}
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* Ghost button for the nav Listen Now — same angled outline system
as .btn-secondary, compact */
.nav-listen {
position: relative;
display: inline-flex;
align-items: center;
font-family: var(--font-body);
font-weight: 500;
font-size: 14px;
white-space: nowrap;
color: var(--color-silver-primary);
border: none;
padding: 8px 24px;
transition: color 0.2s var(--ease);
}
.nav-listen::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: currentColor;
opacity: 0.7;
-webkit-mask-image:
url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2015%2046'%20preserveAspectRatio='none'%3E%3Cpath%20d='M15%200.5%20L0.9%2023%20L15%2045.5'%20fill='none'%20stroke='white'%20stroke-width='1'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2015%2046'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%200.5%20L14.1%2023%20L0%2045.5'%20fill='none'%20stroke='white'%20stroke-width='1'/%3E%3C/svg%3E"),
linear-gradient(#000, #000),
linear-gradient(#000, #000);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: left center, right center, center top, center bottom;
-webkit-mask-size: 12px 100%, 12px 100%, calc(100% - 22px) 1px, calc(100% - 22px) 1px;
mask-image:
url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2015%2046'%20preserveAspectRatio='none'%3E%3Cpath%20d='M15%200.5%20L0.9%2023%20L15%2045.5'%20fill='none'%20stroke='white'%20stroke-width='1'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2015%2046'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%200.5%20L14.1%2023%20L0%2045.5'%20fill='none'%20stroke='white'%20stroke-width='1'/%3E%3C/svg%3E"),
linear-gradient(#000, #000),
linear-gradient(#000, #000);
mask-repeat: no-repeat;
mask-position: left center, right center, center top, center bottom;
mask-size: 12px 100%, 12px 100%, calc(100% - 22px) 1px, calc(100% - 22px) 1px;
}
.nav-listen:hover, .nav-listen:focus-visible { color: #FFFFFF; }
.nav-listen:hover::before, .nav-listen:focus-visible::before { opacity: 1; }
.stream-icons {
display: flex;
align-items: center;
gap: 14px;
margin-top: 18px;
}
.stream-icons-label {
font-size: 12px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-silver-subdued);
margin-right: 2px;
}
.stream-icons a {
display: inline-flex;
width: 24px;
height: 24px;
color: var(--color-silver-subdued);
transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}
.stream-icons a:hover, .stream-icons a:focus-visible {
color: var(--color-silver-primary);
transform: translateY(-1px);
}
.stream-icons svg { width: 100%; height: 100%; }
.platform-row {
display: flex;
align-items: center;
gap: 14px;
margin-top: 18px;
}
.platform-row-label {
font-size: 12px;
font-weight: 500;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--color-silver-subdued);
}
.platform-icon {
display: inline-flex;
width: 26px;
height: 26px;
color: var(--color-silver-subdued);
opacity: 0.85;
transition: color 0.2s var(--ease), opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.platform-icon svg { width: 100%; height: 100%; }
.platform-icon:hover, .platform-icon:focus-visible {
color: var(--color-silver-primary);
opacity: 1;
transform: translateY(-1px);
}
/* Album art panel — the art's own background is the surface color,
so it blends invisibly into this panel */
.hero-art { display: flex; justify-content: center; }
.album-panel {
position: relative;
background: var(--color-surface);
border: 0.5px solid var(--color-border);
border-radius: 3px;
overflow: hidden;
width: min(600px, 100%);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
animation: album-breathe 8s ease-in-out infinite;
}
/* Worn edges: the same fracture/grit technique from the section
transitions, run along all four sides of the panel — reads as a
weathered case edge rather than a clean digital border. Clips
naturally against the panel's own overflow:hidden. */
.album-panel::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
opacity: 0.4;
background-image:
url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%27500%27%20height=%2716%27%3E%3Cpath%20d=%27M0%208%20L9%204%20L24%2010%20L32%2011%20L49%2010%20L57%2010%20L70%205%20L80%205%20L89%2012%20L106%2011%20L123%207%20L138%2010%20L153%205%20L165%205%20L180%209%20L192%206%20L201%204%20L215%206%20L230%2012%20L239%209%20L251%207%20L264%2012%20L272%2010%20L282%204%20L292%205%20L301%205%20L315%2010%20L327%2011%20L339%209%20L355%205%20L363%206%20L377%204%20L392%204%20L405%206%20L418%2012%20L426%2010%20L443%204%20L457%207%20L469%206%20L480%2011%20L500%208%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.8%27%20opacity=%270.65%27/%3E%3Cpath%20d=%27M41%203%20L62%201%20L82%202%20L106%205%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.6%27%20opacity=%270.35%27/%3E%3Cpath%20d=%27M65%203%20L78%202%20L96%201%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.6%27%20opacity=%270.35%27/%3E%3Cpath%20d=%27M373%203%20L384%202%20L400%201%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.6%27%20opacity=%270.35%27/%3E%3Cpath%20d=%27M160%2013%20L171%2014%20L184%2014%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.6%27%20opacity=%270.35%27/%3E%3Cpath%20d=%27M313%203%20L324%204%20L340%201%20L356%201%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.6%27%20opacity=%270.35%27/%3E%3Cpath%20d=%27M68%2013%20L83%2015%20L94%2011%20L118%2014%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.6%27%20opacity=%270.35%27/%3E%3Crect%20x=%27124%27%20y=%2714%27%20width=%271%27%20height=%271%27%20transform=%27rotate(11%20124%2014)%27%20fill=%27%235C6A78%27%20opacity=%270.2%27/%3E%3Ccircle%20cx=%27255%27%20cy=%2713%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.15%27/%3E%3Crect%20x=%27390%27%20y=%276%27%20width=%271.2%27%20height=%271.2%27%20transform=%27rotate(13%20390%206)%27%20fill=%27%235C6A78%27%20opacity=%270.26%27/%3E%3Crect%20x=%2734%27%20y=%278%27%20width=%271.6%27%20height=%271.6%27%20transform=%27rotate(52%2034%208)%27%20fill=%27%235C6A78%27%20opacity=%270.16%27/%3E%3Ccircle%20cx=%27249%27%20cy=%277%27%20r=%270.6%27%20fill=%27%235C6A78%27%20opacity=%270.44%27/%3E%3Ccircle%20cx=%27226%27%20cy=%277%27%20r=%270.6%27%20fill=%27%235C6A78%27%20opacity=%270.2%27/%3E%3Crect%20x=%2759%27%20y=%2710%27%20width=%270.8%27%20height=%270.8%27%20transform=%27rotate(42%2059%2010)%27%20fill=%27%235C6A78%27%20opacity=%270.4%27/%3E%3Crect%20x=%27488%27%20y=%279%27%20width=%271.2%27%20height=%271.2%27%20transform=%27rotate(25%20488%209)%27%20fill=%27%235C6A78%27%20opacity=%270.19%27/%3E%3Crect%20x=%27476%27%20y=%2711%27%20width=%271%27%20height=%271%27%20transform=%27rotate(0%20476%2011)%27%20fill=%27%235C6A78%27%20opacity=%270.43%27/%3E%3Ccircle%20cx=%27204%27%20cy=%274%27%20r=%270.6%27%20fill=%27%235C6A78%27%20opacity=%270.43%27/%3E%3Ccircle%20cx=%27414%27%20cy=%276%27%20r=%270.8%27%20fill=%27%235C6A78%27%20opacity=%270.34%27/%3E%3Ccircle%20cx=%27233%27%20cy=%279%27%20r=%270.8%27%20fill=%27%235C6A78%27%20opacity=%270.45%27/%3E%3Crect%20x=%2734%27%20y=%279%27%20width=%270.8%27%20height=%270.8%27%20transform=%27rotate(49%2034%209)%27%20fill=%27%235C6A78%27%20opacity=%270.23%27/%3E%3Crect%20x=%2798%27%20y=%272%27%20width=%271.6%27%20height=%271.6%27%20transform=%27rotate(57%2098%202)%27%20fill=%27%235C6A78%27%20opacity=%270.29%27/%3E%3Ccircle%20cx=%2729%27%20cy=%279%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.32%27/%3E%3Ccircle%20cx=%27184%27%20cy=%277%27%20r=%270.6%27%20fill=%27%235C6A78%27%20opacity=%270.17%27/%3E%3Crect%20x=%2779%27%20y=%274%27%20width=%271%27%20height=%271%27%20transform=%27rotate(89%2079%204)%27%20fill=%27%235C6A78%27%20opacity=%270.21%27/%3E%3Crect%20x=%27123%27%20y=%277%27%20width=%270.8%27%20height=%270.8%27%20transform=%27rotate(11%20123%207)%27%20fill=%27%235C6A78%27%20opacity=%270.31%27/%3E%3Ccircle%20cx=%2777%27%20cy=%276%27%20r=%270.8%27%20fill=%27%235C6A78%27%20opacity=%270.33%27/%3E%3Crect%20x=%2767%27%20y=%272%27%20width=%271%27%20height=%271%27%20transform=%27rotate(72%2067%202)%27%20fill=%27%235C6A78%27%20opacity=%270.16%27/%3E%3Ccircle%20cx=%2796%27%20cy=%273%27%20r=%270.4%27%20fill=%27%235C6A78%27%20opacity=%270.21%27/%3E%3Ccircle%20cx=%27469%27%20cy=%2712%27%20r=%270.4%27%20fill=%27%235C6A78%27%20opacity=%270.15%27/%3E%3Crect%20x=%27475%27%20y=%276%27%20width=%271.6%27%20height=%271.6%27%20transform=%27rotate(72%20475%206)%27%20fill=%27%235C6A78%27%20opacity=%270.28%27/%3E%3Crect%20x=%27367%27%20y=%2714%27%20width=%271%27%20height=%271%27%20transform=%27rotate(57%20367%2014)%27%20fill=%27%235C6A78%27%20opacity=%270.22%27/%3E%3Crect%20x=%27117%27%20y=%275%27%20width=%270.8%27%20height=%270.8%27%20transform=%27rotate(21%20117%205)%27%20fill=%27%235C6A78%27%20opacity=%270.27%27/%3E%3Crect%20x=%27435%27%20y=%2710%27%20width=%270.8%27%20height=%270.8%27%20transform=%27rotate(38%20435%2010)%27%20fill=%27%235C6A78%27%20opacity=%270.22%27/%3E%3Crect%20x=%27105%27%20y=%279%27%20width=%271.6%27%20height=%271.6%27%20transform=%27rotate(45%20105%209)%27%20fill=%27%235C6A78%27%20opacity=%270.27%27/%3E%3Ccircle%20cx=%27250%27%20cy=%273%27%20r=%270.4%27%20fill=%27%235C6A78%27%20opacity=%270.33%27/%3E%3Ccircle%20cx=%2750%27%20cy=%273%27%20r=%270.4%27%20fill=%27%235C6A78%27%20opacity=%270.23%27/%3E%3Ccircle%20cx=%27224%27%20cy=%274%27%20r=%270.8%27%20fill=%27%235C6A78%27%20opacity=%270.33%27/%3E%3Ccircle%20cx=%27404%27%20cy=%2712%27%20r=%270.6%27%20fill=%27%235C6A78%27%20opacity=%270.19%27/%3E%3Ccircle%20cx=%27165%27%20cy=%2714%27%20r=%270.8%27%20fill=%27%235C6A78%27%20opacity=%270.18%27/%3E%3Ccircle%20cx=%2735%27%20cy=%273%27%20r=%270.8%27%20fill=%27%235C6A78%27%20opacity=%270.27%27/%3E%3Crect%20x=%2722%27%20y=%2711%27%20width=%271.6%27%20height=%271.6%27%20transform=%27rotate(2%2022%2011)%27%20fill=%27%235C6A78%27%20opacity=%270.37%27/%3E%3Ccircle%20cx=%2794%27%20cy=%279%27%20r=%270.4%27%20fill=%27%235C6A78%27%20opacity=%270.45%27/%3E%3Crect%20x=%27359%27%20y=%2710%27%20width=%270.8%27%20height=%270.8%27%20transform=%27rotate(43%20359%2010)%27%20fill=%27%235C6A78%27%20opacity=%270.37%27/%3E%3Ccircle%20cx=%2734%27%20cy=%277%27%20r=%270.6%27%20fill=%27%235C6A78%27%20opacity=%270.24%27/%3E%3Crect%20x=%27180%27%20y=%2712%27%20width=%271.6%27%20height=%271.6%27%20transform=%27rotate(22%20180%2012)%27%20fill=%27%235C6A78%27%20opacity=%270.42%27/%3E%3Crect%20x=%27132%27%20y=%272%27%20width=%271.6%27%20height=%271.6%27%20transform=%27rotate(6%20132%202)%27%20fill=%27%235C6A78%27%20opacity=%270.16%27/%3E%3Crect%20x=%27410%27%20y=%274%27%20width=%271.6%27%20height=%271.6%27%20transform=%27rotate(54%20410%204)%27%20fill=%27%235C6A78%27%20opacity=%270.43%27/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%27500%27%20height=%2716%27%3E%3Cpath%20d=%27M0%208%20L9%204%20L24%2010%20L32%2011%20L49%2010%20L57%2010%20L70%205%20L80%205%20L89%2012%20L106%2011%20L123%207%20L138%2010%20L153%205%20L165%205%20L180%209%20L192%206%20L201%204%20L215%206%20L230%2012%20L239%209%20L251%207%20L264%2012%20L272%2010%20L282%204%20L292%205%20L301%205%20L315%2010%20L327%2011%20L339%209%20L355%205%20L363%206%20L377%204%20L392%204%20L405%206%20L418%2012%20L426%2010%20L443%204%20L457%207%20L469%206%20L480%2011%20L500%208%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.8%27%20opacity=%270.65%27/%3E%3Cpath%20d=%27M41%203%20L62%201%20L82%202%20L106%205%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.6%27%20opacity=%270.35%27/%3E%3Cpath%20d=%27M65%203%20L78%202%20L96%201%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.6%27%20opacity=%270.35%27/%3E%3Cpath%20d=%27M373%203%20L384%202%20L400%201%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.6%27%20opacity=%270.35%27/%3E%3Cpath%20d=%27M160%2013%20L171%2014%20L184%2014%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.6%27%20opacity=%270.35%27/%3E%3Cpath%20d=%27M313%203%20L324%204%20L340%201%20L356%201%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.6%27%20opacity=%270.35%27/%3E%3Cpath%20d=%27M68%2013%20L83%2015%20L94%2011%20L118%2014%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.6%27%20opacity=%270.35%27/%3E%3Crect%20x=%27124%27%20y=%2714%27%20width=%271%27%20height=%271%27%20transform=%27rotate(11%20124%2014)%27%20fill=%27%235C6A78%27%20opacity=%270.2%27/%3E%3Ccircle%20cx=%27255%27%20cy=%2713%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.15%27/%3E%3Crect%20x=%27390%27%20y=%276%27%20width=%271.2%27%20height=%271.2%27%20transform=%27rotate(13%20390%206)%27%20fill=%27%235C6A78%27%20opacity=%270.26%27/%3E%3Crect%20x=%2734%27%20y=%278%27%20width=%271.6%27%20height=%271.6%27%20transform=%27rotate(52%2034%208)%27%20fill=%27%235C6A78%27%20opacity=%270.16%27/%3E%3Ccircle%20cx=%27249%27%20cy=%277%27%20r=%270.6%27%20fill=%27%235C6A78%27%20opacity=%270.44%27/%3E%3Ccircle%20cx=%27226%27%20cy=%277%27%20r=%270.6%27%20fill=%27%235C6A78%27%20opacity=%270.2%27/%3E%3Crect%20x=%2759%27%20y=%2710%27%20width=%270.8%27%20height=%270.8%27%20transform=%27rotate(42%2059%2010)%27%20fill=%27%235C6A78%27%20opacity=%270.4%27/%3E%3Crect%20x=%27488%27%20y=%279%27%20width=%271.2%27%20height=%271.2%27%20transform=%27rotate(25%20488%209)%27%20fill=%27%235C6A78%27%20opacity=%270.19%27/%3E%3Crect%20x=%27476%27%20y=%2711%27%20width=%271%27%20height=%271%27%20transform=%27rotate(0%20476%2011)%27%20fill=%27%235C6A78%27%20opacity=%270.43%27/%3E%3Ccircle%20cx=%27204%27%20cy=%274%27%20r=%270.6%27%20fill=%27%235C6A78%27%20opacity=%270.43%27/%3E%3Ccircle%20cx=%27414%27%20cy=%276%27%20r=%270.8%27%20fill=%27%235C6A78%27%20opacity=%270.34%27/%3E%3Ccircle%20cx=%27233%27%20cy=%279%27%20r=%270.8%27%20fill=%27%235C6A78%27%20opacity=%270.45%27/%3E%3Crect%20x=%2734%27%20y=%279%27%20width=%270.8%27%20height=%270.8%27%20transform=%27rotate(49%2034%209)%27%20fill=%27%235C6A78%27%20opacity=%270.23%27/%3E%3Crect%20x=%2798%27%20y=%272%27%20width=%271.6%27%20height=%271.6%27%20transform=%27rotate(57%2098%202)%27%20fill=%27%235C6A78%27%20opacity=%270.29%27/%3E%3Ccircle%20cx=%2729%27%20cy=%279%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.32%27/%3E%3Ccircle%20cx=%27184%27%20cy=%277%27%20r=%270.6%27%20fill=%27%235C6A78%27%20opacity=%270.17%27/%3E%3Crect%20x=%2779%27%20y=%274%27%20width=%271%27%20height=%271%27%20transform=%27rotate(89%2079%204)%27%20fill=%27%235C6A78%27%20opacity=%270.21%27/%3E%3Crect%20x=%27123%27%20y=%277%27%20width=%270.8%27%20height=%270.8%27%20transform=%27rotate(11%20123%207)%27%20fill=%27%235C6A78%27%20opacity=%270.31%27/%3E%3Ccircle%20cx=%2777%27%20cy=%276%27%20r=%270.8%27%20fill=%27%235C6A78%27%20opacity=%270.33%27/%3E%3Crect%20x=%2767%27%20y=%272%27%20width=%271%27%20height=%271%27%20transform=%27rotate(72%2067%202)%27%20fill=%27%235C6A78%27%20opacity=%270.16%27/%3E%3Ccircle%20cx=%2796%27%20cy=%273%27%20r=%270.4%27%20fill=%27%235C6A78%27%20opacity=%270.21%27/%3E%3Ccircle%20cx=%27469%27%20cy=%2712%27%20r=%270.4%27%20fill=%27%235C6A78%27%20opacity=%270.15%27/%3E%3Crect%20x=%27475%27%20y=%276%27%20width=%271.6%27%20height=%271.6%27%20transform=%27rotate(72%20475%206)%27%20fill=%27%235C6A78%27%20opacity=%270.28%27/%3E%3Crect%20x=%27367%27%20y=%2714%27%20width=%271%27%20height=%271%27%20transform=%27rotate(57%20367%2014)%27%20fill=%27%235C6A78%27%20opacity=%270.22%27/%3E%3Crect%20x=%27117%27%20y=%275%27%20width=%270.8%27%20height=%270.8%27%20transform=%27rotate(21%20117%205)%27%20fill=%27%235C6A78%27%20opacity=%270.27%27/%3E%3Crect%20x=%27435%27%20y=%2710%27%20width=%270.8%27%20height=%270.8%27%20transform=%27rotate(38%20435%2010)%27%20fill=%27%235C6A78%27%20opacity=%270.22%27/%3E%3Crect%20x=%27105%27%20y=%279%27%20width=%271.6%27%20height=%271.6%27%20transform=%27rotate(45%20105%209)%27%20fill=%27%235C6A78%27%20opacity=%270.27%27/%3E%3Ccircle%20cx=%27250%27%20cy=%273%27%20r=%270.4%27%20fill=%27%235C6A78%27%20opacity=%270.33%27/%3E%3Ccircle%20cx=%2750%27%20cy=%273%27%20r=%270.4%27%20fill=%27%235C6A78%27%20opacity=%270.23%27/%3E%3Ccircle%20cx=%27224%27%20cy=%274%27%20r=%270.8%27%20fill=%27%235C6A78%27%20opacity=%270.33%27/%3E%3Ccircle%20cx=%27404%27%20cy=%2712%27%20r=%270.6%27%20fill=%27%235C6A78%27%20opacity=%270.19%27/%3E%3Ccircle%20cx=%27165%27%20cy=%2714%27%20r=%270.8%27%20fill=%27%235C6A78%27%20opacity=%270.18%27/%3E%3Ccircle%20cx=%2735%27%20cy=%273%27%20r=%270.8%27%20fill=%27%235C6A78%27%20opacity=%270.27%27/%3E%3Crect%20x=%2722%27%20y=%2711%27%20width=%271.6%27%20height=%271.6%27%20transform=%27rotate(2%2022%2011)%27%20fill=%27%235C6A78%27%20opacity=%270.37%27/%3E%3Ccircle%20cx=%2794%27%20cy=%279%27%20r=%270.4%27%20fill=%27%235C6A78%27%20opacity=%270.45%27/%3E%3Crect%20x=%27359%27%20y=%2710%27%20width=%270.8%27%20height=%270.8%27%20transform=%27rotate(43%20359%2010)%27%20fill=%27%235C6A78%27%20opacity=%270.37%27/%3E%3Ccircle%20cx=%2734%27%20cy=%277%27%20r=%270.6%27%20fill=%27%235C6A78%27%20opacity=%270.24%27/%3E%3Crect%20x=%27180%27%20y=%2712%27%20width=%271.6%27%20height=%271.6%27%20transform=%27rotate(22%20180%2012)%27%20fill=%27%235C6A78%27%20opacity=%270.42%27/%3E%3Crect%20x=%27132%27%20y=%272%27%20width=%271.6%27%20height=%271.6%27%20transform=%27rotate(6%20132%202)%27%20fill=%27%235C6A78%27%20opacity=%270.16%27/%3E%3Crect%20x=%27410%27%20y=%274%27%20width=%271.6%27%20height=%271.6%27%20transform=%27rotate(54%20410%204)%27%20fill=%27%235C6A78%27%20opacity=%270.43%27/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2716%27%20height=%27500%27%3E%3Cpath%20d=%27M8%200%20L5%2014%20L10%2031%20L7%2041%20L12%2056%20L6%2065%20L7%2078%20L9%2087%20L9%2096%20L12%20112%20L10%20122%20L11%20133%20L10%20144%20L11%20154%20L7%20169%20L12%20180%20L6%20192%20L4%20206%20L9%20216%20L7%20231%20L5%20244%20L9%20259%20L6%20272%20L11%20287%20L9%20295%20L6%20311%20L7%20326%20L12%20340%20L4%20354%20L11%20371%20L5%20382%20L9%20392%20L4%20409%20L12%20424%20L11%20437%20L5%20451%20L12%20465%20L11%20480%20L8%20500%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.8%27%20opacity=%270.65%27/%3E%3Cpath%20d=%27M13%20220%20L12%20242%20L15%20254%20L12%20267%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.6%27%20opacity=%270.35%27/%3E%3Cpath%20d=%27M3%20226%20L1%20241%20L2%20265%20L2%20276%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.6%27%20opacity=%270.35%27/%3E%3Cpath%20d=%27M13%20273%20L15%20286%20L15%20303%20L12%20327%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.6%27%20opacity=%270.35%27/%3E%3Cpath%20d=%27M13%20175%20L15%20194%20L15%20204%20L14%20227%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.6%27%20opacity=%270.35%27/%3E%3Cpath%20d=%27M3%2095%20L1%20105%20L1%20123%20L4%20135%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.6%27%20opacity=%270.35%27/%3E%3Cpath%20d=%27M13%2085%20L15%20105%20L14%20117%20L14%20131%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.6%27%20opacity=%270.35%27/%3E%3Crect%20x=%275%27%20y=%27284%27%20width=%270.8%27%20height=%270.8%27%20transform=%27rotate(51%205%20284)%27%20fill=%27%235C6A78%27%20opacity=%270.35%27/%3E%3Ccircle%20cx=%277%27%20cy=%2723%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.26%27/%3E%3Ccircle%20cx=%279%27%20cy=%27192%27%20r=%270.6%27%20fill=%27%235C6A78%27%20opacity=%270.26%27/%3E%3Crect%20x=%277%27%20y=%27338%27%20width=%270.8%27%20height=%270.8%27%20transform=%27rotate(44%207%20338)%27%20fill=%27%235C6A78%27%20opacity=%270.36%27/%3E%3Crect%20x=%2710%27%20y=%27280%27%20width=%271.2%27%20height=%271.2%27%20transform=%27rotate(49%2010%20280)%27%20fill=%27%235C6A78%27%20opacity=%270.19%27/%3E%3Crect%20x=%2710%27%20y=%2716%27%20width=%271.2%27%20height=%271.2%27%20transform=%27rotate(69%2010%2016)%27%20fill=%27%235C6A78%27%20opacity=%270.33%27/%3E%3Crect%20x=%273%27%20y=%2750%27%20width=%271%27%20height=%271%27%20transform=%27rotate(3%203%2050)%27%20fill=%27%235C6A78%27%20opacity=%270.33%27/%3E%3Ccircle%20cx=%277%27%20cy=%27109%27%20r=%270.6%27%20fill=%27%235C6A78%27%20opacity=%270.39%27/%3E%3Ccircle%20cx=%278%27%20cy=%27162%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.43%27/%3E%3Ccircle%20cx=%274%27%20cy=%27435%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.35%27/%3E%3Ccircle%20cx=%277%27%20cy=%27386%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.16%27/%3E%3Crect%20x=%2710%27%20y=%27302%27%20width=%271%27%20height=%271%27%20transform=%27rotate(36%2010%20302)%27%20fill=%27%235C6A78%27%20opacity=%270.22%27/%3E%3Crect%20x=%277%27%20y=%27308%27%20width=%271.6%27%20height=%271.6%27%20transform=%27rotate(80%207%20308)%27%20fill=%27%235C6A78%27%20opacity=%270.38%27/%3E%3Ccircle%20cx=%276%27%20cy=%27201%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.16%27/%3E%3Crect%20x=%2710%27%20y=%27429%27%20width=%271.6%27%20height=%271.6%27%20transform=%27rotate(79%2010%20429)%27%20fill=%27%235C6A78%27%20opacity=%270.26%27/%3E%3Ccircle%20cx=%272%27%20cy=%27401%27%20r=%270.4%27%20fill=%27%235C6A78%27%20opacity=%270.24%27/%3E%3Ccircle%20cx=%275%27%20cy=%27307%27%20r=%270.8%27%20fill=%27%235C6A78%27%20opacity=%270.22%27/%3E%3Ccircle%20cx=%2711%27%20cy=%27300%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.16%27/%3E%3Crect%20x=%2711%27%20y=%2746%27%20width=%270.8%27%20height=%270.8%27%20transform=%27rotate(10%2011%2046)%27%20fill=%27%235C6A78%27%20opacity=%270.35%27/%3E%3Crect%20x=%273%27%20y=%27172%27%20width=%271%27%20height=%271%27%20transform=%27rotate(14%203%20172)%27%20fill=%27%235C6A78%27%20opacity=%270.33%27/%3E%3Ccircle%20cx=%278%27%20cy=%27258%27%20r=%270.4%27%20fill=%27%235C6A78%27%20opacity=%270.43%27/%3E%3Ccircle%20cx=%275%27%20cy=%27234%27%20r=%270.6%27%20fill=%27%235C6A78%27%20opacity=%270.3%27/%3E%3Crect%20x=%275%27%20y=%27285%27%20width=%271.6%27%20height=%271.6%27%20transform=%27rotate(52%205%20285)%27%20fill=%27%235C6A78%27%20opacity=%270.33%27/%3E%3Crect%20x=%278%27%20y=%27124%27%20width=%271.2%27%20height=%271.2%27%20transform=%27rotate(54%208%20124)%27%20fill=%27%235C6A78%27%20opacity=%270.23%27/%3E%3Crect%20x=%278%27%20y=%2753%27%20width=%271%27%20height=%271%27%20transform=%27rotate(69%208%2053)%27%20fill=%27%235C6A78%27%20opacity=%270.19%27/%3E%3Ccircle%20cx=%275%27%20cy=%27475%27%20r=%270.8%27%20fill=%27%235C6A78%27%20opacity=%270.19%27/%3E%3Crect%20x=%273%27%20y=%27262%27%20width=%270.8%27%20height=%270.8%27%20transform=%27rotate(88%203%20262)%27%20fill=%27%235C6A78%27%20opacity=%270.42%27/%3E%3Crect%20x=%275%27%20y=%27423%27%20width=%270.8%27%20height=%270.8%27%20transform=%27rotate(61%205%20423)%27%20fill=%27%235C6A78%27%20opacity=%270.27%27/%3E%3Ccircle%20cx=%278%27%20cy=%27139%27%20r=%270.6%27%20fill=%27%235C6A78%27%20opacity=%270.42%27/%3E%3Ccircle%20cx=%276%27%20cy=%27275%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.37%27/%3E%3Ccircle%20cx=%2714%27%20cy=%27362%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.4%27/%3E%3Crect%20x=%274%27%20y=%27434%27%20width=%271.6%27%20height=%271.6%27%20transform=%27rotate(2%204%20434)%27%20fill=%27%235C6A78%27%20opacity=%270.44%27/%3E%3Ccircle%20cx=%2711%27%20cy=%27480%27%20r=%270.8%27%20fill=%27%235C6A78%27%20opacity=%270.28%27/%3E%3Crect%20x=%275%27%20y=%27387%27%20width=%270.8%27%20height=%270.8%27%20transform=%27rotate(54%205%20387)%27%20fill=%27%235C6A78%27%20opacity=%270.33%27/%3E%3Ccircle%20cx=%2713%27%20cy=%27216%27%20r=%270.8%27%20fill=%27%235C6A78%27%20opacity=%270.19%27/%3E%3Ccircle%20cx=%277%27%20cy=%27365%27%20r=%270.4%27%20fill=%27%235C6A78%27%20opacity=%270.43%27/%3E%3Ccircle%20cx=%274%27%20cy=%27108%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.16%27/%3E%3Ccircle%20cx=%2710%27%20cy=%27255%27%20r=%270.8%27%20fill=%27%235C6A78%27%20opacity=%270.37%27/%3E%3Ccircle%20cx=%276%27%20cy=%27115%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.31%27/%3E%3Crect%20x=%278%27%20y=%27244%27%20width=%271.6%27%20height=%271.6%27%20transform=%27rotate(30%208%20244)%27%20fill=%27%235C6A78%27%20opacity=%270.3%27/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2716%27%20height=%27500%27%3E%3Cpath%20d=%27M8%200%20L5%2014%20L10%2031%20L7%2041%20L12%2056%20L6%2065%20L7%2078%20L9%2087%20L9%2096%20L12%20112%20L10%20122%20L11%20133%20L10%20144%20L11%20154%20L7%20169%20L12%20180%20L6%20192%20L4%20206%20L9%20216%20L7%20231%20L5%20244%20L9%20259%20L6%20272%20L11%20287%20L9%20295%20L6%20311%20L7%20326%20L12%20340%20L4%20354%20L11%20371%20L5%20382%20L9%20392%20L4%20409%20L12%20424%20L11%20437%20L5%20451%20L12%20465%20L11%20480%20L8%20500%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.8%27%20opacity=%270.65%27/%3E%3Cpath%20d=%27M13%20220%20L12%20242%20L15%20254%20L12%20267%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.6%27%20opacity=%270.35%27/%3E%3Cpath%20d=%27M3%20226%20L1%20241%20L2%20265%20L2%20276%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.6%27%20opacity=%270.35%27/%3E%3Cpath%20d=%27M13%20273%20L15%20286%20L15%20303%20L12%20327%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.6%27%20opacity=%270.35%27/%3E%3Cpath%20d=%27M13%20175%20L15%20194%20L15%20204%20L14%20227%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.6%27%20opacity=%270.35%27/%3E%3Cpath%20d=%27M3%2095%20L1%20105%20L1%20123%20L4%20135%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.6%27%20opacity=%270.35%27/%3E%3Cpath%20d=%27M13%2085%20L15%20105%20L14%20117%20L14%20131%27%20fill=%27none%27%20stroke=%27%235C6A78%27%20stroke-width=%270.6%27%20opacity=%270.35%27/%3E%3Crect%20x=%275%27%20y=%27284%27%20width=%270.8%27%20height=%270.8%27%20transform=%27rotate(51%205%20284)%27%20fill=%27%235C6A78%27%20opacity=%270.35%27/%3E%3Ccircle%20cx=%277%27%20cy=%2723%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.26%27/%3E%3Ccircle%20cx=%279%27%20cy=%27192%27%20r=%270.6%27%20fill=%27%235C6A78%27%20opacity=%270.26%27/%3E%3Crect%20x=%277%27%20y=%27338%27%20width=%270.8%27%20height=%270.8%27%20transform=%27rotate(44%207%20338)%27%20fill=%27%235C6A78%27%20opacity=%270.36%27/%3E%3Crect%20x=%2710%27%20y=%27280%27%20width=%271.2%27%20height=%271.2%27%20transform=%27rotate(49%2010%20280)%27%20fill=%27%235C6A78%27%20opacity=%270.19%27/%3E%3Crect%20x=%2710%27%20y=%2716%27%20width=%271.2%27%20height=%271.2%27%20transform=%27rotate(69%2010%2016)%27%20fill=%27%235C6A78%27%20opacity=%270.33%27/%3E%3Crect%20x=%273%27%20y=%2750%27%20width=%271%27%20height=%271%27%20transform=%27rotate(3%203%2050)%27%20fill=%27%235C6A78%27%20opacity=%270.33%27/%3E%3Ccircle%20cx=%277%27%20cy=%27109%27%20r=%270.6%27%20fill=%27%235C6A78%27%20opacity=%270.39%27/%3E%3Ccircle%20cx=%278%27%20cy=%27162%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.43%27/%3E%3Ccircle%20cx=%274%27%20cy=%27435%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.35%27/%3E%3Ccircle%20cx=%277%27%20cy=%27386%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.16%27/%3E%3Crect%20x=%2710%27%20y=%27302%27%20width=%271%27%20height=%271%27%20transform=%27rotate(36%2010%20302)%27%20fill=%27%235C6A78%27%20opacity=%270.22%27/%3E%3Crect%20x=%277%27%20y=%27308%27%20width=%271.6%27%20height=%271.6%27%20transform=%27rotate(80%207%20308)%27%20fill=%27%235C6A78%27%20opacity=%270.38%27/%3E%3Ccircle%20cx=%276%27%20cy=%27201%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.16%27/%3E%3Crect%20x=%2710%27%20y=%27429%27%20width=%271.6%27%20height=%271.6%27%20transform=%27rotate(79%2010%20429)%27%20fill=%27%235C6A78%27%20opacity=%270.26%27/%3E%3Ccircle%20cx=%272%27%20cy=%27401%27%20r=%270.4%27%20fill=%27%235C6A78%27%20opacity=%270.24%27/%3E%3Ccircle%20cx=%275%27%20cy=%27307%27%20r=%270.8%27%20fill=%27%235C6A78%27%20opacity=%270.22%27/%3E%3Ccircle%20cx=%2711%27%20cy=%27300%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.16%27/%3E%3Crect%20x=%2711%27%20y=%2746%27%20width=%270.8%27%20height=%270.8%27%20transform=%27rotate(10%2011%2046)%27%20fill=%27%235C6A78%27%20opacity=%270.35%27/%3E%3Crect%20x=%273%27%20y=%27172%27%20width=%271%27%20height=%271%27%20transform=%27rotate(14%203%20172)%27%20fill=%27%235C6A78%27%20opacity=%270.33%27/%3E%3Ccircle%20cx=%278%27%20cy=%27258%27%20r=%270.4%27%20fill=%27%235C6A78%27%20opacity=%270.43%27/%3E%3Ccircle%20cx=%275%27%20cy=%27234%27%20r=%270.6%27%20fill=%27%235C6A78%27%20opacity=%270.3%27/%3E%3Crect%20x=%275%27%20y=%27285%27%20width=%271.6%27%20height=%271.6%27%20transform=%27rotate(52%205%20285)%27%20fill=%27%235C6A78%27%20opacity=%270.33%27/%3E%3Crect%20x=%278%27%20y=%27124%27%20width=%271.2%27%20height=%271.2%27%20transform=%27rotate(54%208%20124)%27%20fill=%27%235C6A78%27%20opacity=%270.23%27/%3E%3Crect%20x=%278%27%20y=%2753%27%20width=%271%27%20height=%271%27%20transform=%27rotate(69%208%2053)%27%20fill=%27%235C6A78%27%20opacity=%270.19%27/%3E%3Ccircle%20cx=%275%27%20cy=%27475%27%20r=%270.8%27%20fill=%27%235C6A78%27%20opacity=%270.19%27/%3E%3Crect%20x=%273%27%20y=%27262%27%20width=%270.8%27%20height=%270.8%27%20transform=%27rotate(88%203%20262)%27%20fill=%27%235C6A78%27%20opacity=%270.42%27/%3E%3Crect%20x=%275%27%20y=%27423%27%20width=%270.8%27%20height=%270.8%27%20transform=%27rotate(61%205%20423)%27%20fill=%27%235C6A78%27%20opacity=%270.27%27/%3E%3Ccircle%20cx=%278%27%20cy=%27139%27%20r=%270.6%27%20fill=%27%235C6A78%27%20opacity=%270.42%27/%3E%3Ccircle%20cx=%276%27%20cy=%27275%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.37%27/%3E%3Ccircle%20cx=%2714%27%20cy=%27362%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.4%27/%3E%3Crect%20x=%274%27%20y=%27434%27%20width=%271.6%27%20height=%271.6%27%20transform=%27rotate(2%204%20434)%27%20fill=%27%235C6A78%27%20opacity=%270.44%27/%3E%3Ccircle%20cx=%2711%27%20cy=%27480%27%20r=%270.8%27%20fill=%27%235C6A78%27%20opacity=%270.28%27/%3E%3Crect%20x=%275%27%20y=%27387%27%20width=%270.8%27%20height=%270.8%27%20transform=%27rotate(54%205%20387)%27%20fill=%27%235C6A78%27%20opacity=%270.33%27/%3E%3Ccircle%20cx=%2713%27%20cy=%27216%27%20r=%270.8%27%20fill=%27%235C6A78%27%20opacity=%270.19%27/%3E%3Ccircle%20cx=%277%27%20cy=%27365%27%20r=%270.4%27%20fill=%27%235C6A78%27%20opacity=%270.43%27/%3E%3Ccircle%20cx=%274%27%20cy=%27108%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.16%27/%3E%3Ccircle%20cx=%2710%27%20cy=%27255%27%20r=%270.8%27%20fill=%27%235C6A78%27%20opacity=%270.37%27/%3E%3Ccircle%20cx=%276%27%20cy=%27115%27%20r=%270.5%27%20fill=%27%235C6A78%27%20opacity=%270.31%27/%3E%3Crect%20x=%278%27%20y=%27244%27%20width=%271.6%27%20height=%271.6%27%20transform=%27rotate(30%208%20244)%27%20fill=%27%235C6A78%27%20opacity=%270.3%27/%3E%3C/svg%3E");
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-position: top center, bottom center, center left, center right;
background-size: 500px 16px, 500px 16px, 16px 500px, 16px 500px;
}
.album-img {
pointer-events: none;
display: block;
width: 100%;
height: auto;
}
/* Slow ambient pulse on the album */
@keyframes album-breathe {
0%, 100% { box-shadow: 0 0 0 rgba(127, 160, 194, 0); }
50% { box-shadow: 0 0 28px rgba(127, 160, 194, 0.08); }
}
/* === THE WORLD =============================================== */
.world-map-frame {
display: block;
width: 100%;
overflow: hidden;
border: 0.5px solid var(--color-border);
border-radius: 4px;
margin-bottom: 24px;
padding: 0;
background: none;
cursor: zoom-in;
position: relative;
}
.map-zoom-hint {
position: absolute;
bottom: 14px;
right: 16px;
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-silver-primary);
background: rgba(16, 16, 19, 0.72);
border: 0.5px solid var(--color-border-button);
border-radius: 2px;
padding: 6px 10px;
opacity: 0;
transition: opacity 0.25s var(--ease);
pointer-events: none;
}
.world-map-frame:hover .map-zoom-hint,
.world-map-frame:focus-visible .map-zoom-hint { opacity: 1; }
/* Map lightbox — full-resolution, scroll/pan to explore */
.map-lightbox {
position: fixed;
inset: 0;
z-index: 300;
background: rgba(10, 10, 12, 0.97);
display: none;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.map-lightbox.open { display: block; }
.map-lightbox img {
display: block;
margin: 0 auto;
padding: 40px 20px;
/* fit the viewport by default */
max-width: calc(100vw - 40px);
max-height: calc(100vh - 80px);
width: auto;
height: auto;
cursor: zoom-in;
}
.map-lightbox.zoomed img {
max-width: none;
max-height: none;
width: 2000px;
cursor: zoom-out;
}
.map-lightbox-close {
position: fixed;
top: 18px;
right: 22px;
z-index: 301;
width: 44px;
height: 44px;
font-size: 26px;
line-height: 1;
color: var(--color-silver-primary);
background: rgba(26, 26, 29, 0.9);
border: 0.5px solid var(--color-border-button);
border-radius: 2px;
cursor: pointer;
transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.map-lightbox-close:hover { color: #fff; border-color: var(--color-silver-muted); }
body.map-open { overflow: hidden; }
.world-map-placeholder {
width: 100%;
height: 340px;
background: var(--color-surface);
display: flex;
align-items: center;
justify-content: center;
}
.world-map-placeholder span {
font-family: var(--font-display);
font-size: 14px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-silver-subdued);
}
/* Ken Burns drift on the real map once it's swapped in.
Applied to .world-map-img (the class on the final ![]()
). */
.world-map-img {
width: 100%;
height: auto;
animation: map-drift 24s ease-in-out infinite alternate;
transform-origin: center;
}
@keyframes map-drift {
from { transform: scale(1); }
to { transform: scale(1.03); }
}
/* === HIGHLIGHTS ============================================== */
/* ReelCrafter player frame — height knob below */
:root { --reel-height: 600px; }
.reel-frame {
position: relative;
background: var(--color-surface);
border: none;
clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
filter: drop-shadow(0 0 0.5px rgba(92, 106, 120, 0.7));
padding: 12px;
margin-bottom: 36px;
}
.reel-frame::before {
content: "";
position: absolute;
inset: 5px;
pointer-events: none;
z-index: 1;
border: 0.5px solid rgba(92, 106, 120, 0.3);
clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px);
}
.reel-embed { position: relative; }
.reel-embed iframe {
display: block;
width: 100%;
height: var(--reel-height);
border: 0;
}
.reel-placeholder {
height: var(--reel-height);
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #26272b, #15161a);
}
.reel-placeholder span {
font-family: var(--font-display);
font-size: 14px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-silver-subdued);
}
.highlight-cta { text-align: center; }
/* === COMPOSERS =============================================== */
.composer-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
}
.composer-card {
display: block; /* the whole card is an */
position: relative;
background: var(--color-surface);
border: none;
clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
filter: drop-shadow(0 0 0.5px rgba(92, 106, 120, 0.7));
padding: 30px;
color: inherit;
transition: filter 0.3s var(--ease), transform 0.3s var(--ease);
}
/* Inner hairline frame, chamfered to match the card */
.composer-card::before {
content: "";
position: absolute;
inset: 6px;
pointer-events: none;
border: 0.5px solid rgba(92, 106, 120, 0.3);
clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px);
}
.composer-card:hover,
.composer-card:focus-visible {
filter: drop-shadow(0 0 0.5px rgba(138, 152, 168, 1)) drop-shadow(0 0 10px rgba(92, 106, 120, 0.35));
transform: translateY(-2px);
}
/* Cue the whole card as clickable */
.composer-card:hover .composer-link,
.composer-card:focus-visible .composer-link { color: var(--color-silver-primary); }
.composer-name {
font-family: var(--font-display);
font-weight: 600;
font-size: 22px;
letter-spacing: -0.01em;
color: var(--color-silver-primary);
margin-bottom: 10px;
}
.composer-bio {
font-size: 13.5px;
line-height: 1.7;
color: var(--color-silver-muted);
margin-bottom: 14px;
}
.composer-link {
display: inline-block;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-blue-label);
transition: color 0.2s var(--ease);
}
/* === EMAIL SIGNUP (footer-attached) ========================== */
.footer-signup {
text-align: center;
padding: 12px 0 44px;
}
.signup-title {
font-family: var(--font-display);
font-weight: 600;
font-size: 22px;
letter-spacing: -0.01em;
color: var(--color-silver-primary);
margin-bottom: 10px;
}
.signup-divider {
width: 150px;
height: 9px;
margin: 0 auto 22px;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='150'%20height='9'%3E%3Cpath%20d='M0%204.5%20H62'%20stroke='%235C6A78'%20stroke-width='1'/%3E%3Crect%20x='71'%20y='1'%20width='7'%20height='7'%20transform='rotate(45%2074.5%204.5)'%20fill='none'%20stroke='%237FA0C2'%20stroke-width='1'/%3E%3Cpath%20d='M88%204.5%20H150'%20stroke='%235C6A78'%20stroke-width='1'/%3E%3C/svg%3E");
background-repeat: no-repeat;
}
.signup-form {
display: flex;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
}
.signup-input {
background: var(--color-surface);
border: 0.5px solid var(--color-border);
border-radius: 2px;
padding: 11px 14px;
color: var(--color-silver-body);
font-family: var(--font-body);
font-size: 13px;
width: 240px;
transition: border-color 0.2s var(--ease);
}
.signup-input::placeholder { color: var(--color-silver-subdued); }
.signup-input:focus {
outline: none;
border-color: var(--color-border-button);
}
.signup-message {
margin-top: 12px;
font-size: 13px;
min-height: 18px;
}
.signup-message-success { color: var(--color-blue-label); }
.signup-message-error { color: #C97B7B; }
.signup-note {
margin-bottom: 16px;
font-size: 12px;
color: var(--color-silver-subdued);
}
/* === FOOTER ================================================== */
.footer {
padding: 64px 0;
position: relative;
z-index: 2;
}
/* Everything lives in one defined panel */
.footer-panel {
background: var(--color-surface);
border: 0.5px solid var(--color-border);
border-radius: 2px;
padding: 40px 44px 30px;
}
.footer-grid {
display: grid;
grid-template-columns: 1.15fr 1fr 1fr 1fr;
gap: 32px;
padding-bottom: 32px;
}
.footer-logo {
pointer-events: none;
width: 170px;
height: auto;
object-fit: contain;
}
.footer-heading {
font-family: var(--font-display);
font-weight: 600;
font-size: 14px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-silver-primary);
margin-bottom: 14px;
}
.footer-heading::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
margin-right: 9px;
border: 1px solid var(--color-blue-label);
transform: rotate(45deg) translateY(-1px);
opacity: 0.7;
}
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 8px; }
.footer-links a {
font-size: 13px;
color: var(--color-silver-muted);
transition: color 0.2s var(--ease);
}
.footer-links a:hover, .footer-links a:focus-visible { color: var(--color-silver-primary); }
/* Base row: inquiry left, copyright right — one hairline, one row */
.footer-base {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
border-top: 0.5px solid var(--color-border);
padding-top: 24px;
}
.footer-inquiry {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 12px;
}
.footer-inquiry-label {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-blue-label);
}
.footer-inquiry-mail {
font-family: var(--font-display);
font-weight: 600;
font-size: 17px;
color: var(--color-silver-primary);
transition: color 0.2s var(--ease);
}
.footer-inquiry-mail:hover, .footer-inquiry-mail:focus-visible { color: var(--color-blue-label); }
.footer-copyright {
font-size: 12px;
color: var(--color-silver-subdued);
}
/* === SCROLL REVEAL =========================================== */
.reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.revealed {
opacity: 1;
transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
/* === REDUCED MOTION ========================================== */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.reveal { opacity: 1; transform: none; transition: none; }
.album-panel { animation: none; }
.world-map-img { animation: none; }
.btn-primary:disabled { animation: none; opacity: 0.7; }
*, *::before, *::after { transition-duration: 0.01ms !important; }
}
/* === LEGAL PAGES (Privacy / Terms) =========================== */
.legal-page {
padding: 64px 0 96px;
min-height: 60vh;
}
.legal-title {
font-family: var(--font-display);
font-weight: 600;
font-size: 36px;
letter-spacing: -0.015em;
color: var(--color-silver-primary);
margin-bottom: 8px;
}
.legal-updated {
font-size: 13px;
color: var(--color-silver-subdued);
margin-bottom: 40px;
}
.legal-body {
font-size: 15px;
line-height: 1.75;
color: var(--color-silver-muted);
max-width: 680px;
}
.legal-body h2 {
font-family: var(--font-display);
font-weight: 600;
font-size: 19px;
letter-spacing: -0.005em;
color: var(--color-silver-primary);
margin: 36px 0 12px;
}
.legal-body p { margin-bottom: 16px; }
.legal-body ul {
margin: 0 0 16px 22px;
}
.legal-body li { margin-bottom: 8px; }
.legal-body a {
color: var(--color-blue-label);
text-decoration: underline;
text-underline-offset: 2px;
}
.legal-body a:hover, .legal-body a:focus-visible { color: var(--color-silver-primary); }
.legal-disclaimer {
margin-top: 36px;
padding-top: 20px;
border-top: 0.5px solid var(--color-border);
font-size: 13px;
font-style: italic;
color: var(--color-silver-subdued);
}
/* === 404 PAGE ================================================= */
.notfound-page {
padding: 140px 0;
min-height: 60vh;
text-align: center;
}
.notfound-eyebrow {
font-family: var(--font-display);
font-weight: 600;
font-size: 15px;
letter-spacing: 0.12em;
color: var(--color-blue-label);
margin-bottom: 14px;
}
.notfound-title {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(30px, 4vw, 42px);
letter-spacing: -0.018em;
color: var(--color-silver-primary);
margin-bottom: 16px;
}
.notfound-sub {
font-size: 16px;
color: var(--color-silver-muted);
max-width: 440px;
margin: 0 auto 32px;
}
/* === RESPONSIVE ==============================================
Breakpoints, largest to smallest:
1120px — laptop: tighten hero
900px — tablet: hero stacks & centers, arch shrinks a step
760px — large phone: single-column composers, shorter media
640px — phone: compact nav/sections/footer
480px — small phone: full-width CTAs, stacked forms
============================================================== */
@media (max-width: 1120px) {
.hero-grid { gap: 36px; }
.album-panel { width: min(520px, 100%); }
}
@media (max-width: 900px) {
:root { --logo-size: 126px; --arch-overhang: 44px; }
.hero-grid { grid-template-columns: 1fr; gap: 40px; }
.hero { background: radial-gradient(ellipse 640px 420px at 50% 30%, rgba(30, 77, 140, 0.14), transparent 70%); }
.hero-copy { text-align: center; }
.hero-title { margin-left: auto; margin-right: auto; }
.hero-sub { margin-left: auto; margin-right: auto; }
.cta-row { justify-content: center; }
.stream-icons { justify-content: center; }
.platform-row { justify-content: center; }
.album-panel { width: min(500px, 94%); }
.section { padding: 64px 0; }
.section-title::after { margin-left: 0; }
.footer-grid { grid-template-columns: 1fr 1fr; row-gap: 28px; }
.footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
:root { --reel-height: 600px; }
.composer-grid { grid-template-columns: 1fr; }
.world-map-placeholder { height: 260px; }
.footer-base { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 640px) {
.page-frame { inset: 7px; }
.corner { width: 42px; height: 42px; }
.nav-inner { padding: 0 18px; }
.nav-hamburger { margin-right: 2px; }
.hero { padding-top: calc(var(--nav-height) + var(--arch-overhang) + 40px); }
.hero-grid { gap: 32px; }
.hero-sub { font-size: 15px; margin-bottom: 24px; }
.album-panel { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4); }
:root {
--logo-size: 96px;
--arch-width: calc(var(--logo-size) + 40px);
--arch-overhang: 0px; /* no overhang on mobile — emblem centers in the bar */
}
.nav-medallion {
padding-top: 0;
background-color: transparent;
border: none;
box-shadow: none;
}
.container { padding: 0 20px; }
/* Nav collapses to hamburger; links live in the mobile menu.
Stream/Buy remain reachable in the hero and footer regardless. */
.nav-side-left, .nav-side-right { display: none; }
.nav-hamburger { display: flex; }
.section { padding: 52px 0; }
.section-title { font-size: 27px; }
.hero { padding-bottom: 72px; }
.footer-grid { grid-template-columns: 1fr; gap: 24px; }
.footer-panel { padding: 26px 22px 22px; }
}
@media (max-width: 480px) {
:root {
--reel-height: 600px;
--logo-size: 74px;
--arch-width: calc(var(--logo-size) + 34px);
--arch-overhang: 0px;
}
.hero-title { font-size: 36px; }
.album-panel { width: 100%; }
/* CTAs become full-width tap targets */
.cta-row { flex-direction: column; align-items: stretch; }
.cta-row .btn { width: 100%; }
.cta-row .dropdown { width: 100%; }
.cta-row .dropdown .btn { width: 100%; }
.cta-row .dropdown-menu { left: 0; right: 0; }
.signup-form { flex-direction: column; align-items: center; }
.signup-input { width: 100%; max-width: 320px; }
.signup-form .btn { width: 100%; max-width: 320px; }
.world-map-placeholder { height: 220px; }
.footer-inquiry-mail { font-size: 15px; word-break: break-all; }
}