/*! © 2026 Cosmority. All rights reserved.
 * Cosmority website styles. Colours, gradient and type follow the
 * Cosmority Brand Guide v1.0 (November 2026), lockup U8.
 */

/* ---------- Fonts (self-hosted Montserrat, SIL OFL 1.1, see /assets/fonts/OFL.txt) ---------- */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("/assets/fonts/montserrat-latin-300.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/montserrat-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/montserrat-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/montserrat-latin-600.woff2") format("woff2"); }

/* ---------- Brand tokens ---------- */
:root {
  --violet: #6A2BDB;
  --cyan: #11C5D0;
  --navy: #0B1433;
  --navy-2: #111C42;   /* slightly lifted navy for panels */
  --slate: #5A6480;
  --mist: #B8C0DA;
  --cloud: #F4F6FA;
  --white: #FFFFFF;
  --gradient: linear-gradient(115deg, #6A2BDB, #11C5D0);
  --font: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --wrap: 68rem;
  --radius: 14px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--navy);
  /* A quiet, static star field: tiny points of light on deep-space navy. */
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 12%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 64% 42%, rgba(184,192,218,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 32% 66%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 74%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 6% 88%, rgba(184,192,218,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 46% 8%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(60rem 40rem at 85% -10%, rgba(106,43,219,.16), transparent 70%),
    radial-gradient(50rem 36rem at -10% 110%, rgba(17,197,208,.10), transparent 70%);
  background-attachment: fixed;
  color: var(--mist);
  font-family: var(--font);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.65;
}

/* Faint ghost symbol watermark, about 5 % opacity (brand guide section 10).
   Fixed in the bottom-right corner, well away from the logo's clear space. */
body::before {
  content: ""; position: fixed; z-index: -1; pointer-events: none;
  width: min(38rem, 90vw); aspect-ratio: 1; right: max(-14rem, -30vw); bottom: max(-16rem, -34vw);
  background: url("/assets/img/cosmority-symbol-ghost.svg") center / contain no-repeat;
  opacity: .05;
}
body { position: relative; isolation: isolate; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--cyan); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--white); }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  background: var(--white); color: var(--navy); padding: .6rem 1rem; border-radius: 8px;
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* ---------- Header ---------- */
.site-header { padding-block: 1.25rem; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
/* Wordmark in the nav: 170 px wide (brand minimum is 150 px). Padding adds clear space. */
.brand { display: inline-block; padding: .5rem 0; border-radius: 6px; }
.brand img { width: 170px; }

.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem 1.25rem; flex-wrap: wrap; }
.site-nav a {
  display: inline-block; padding: .4rem 0; color: var(--mist); text-decoration: none;
  font-weight: 500; font-size: .95rem; letter-spacing: .02em; border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--white); }
.site-nav a[aria-current="page"] { color: var(--white); border-image: var(--gradient) 1; border-bottom-style: solid; }

/* ---------- Main ---------- */
main { flex: 1 0 auto; }

h1, h2, h3 { color: var(--white); line-height: 1.2; margin: 0 0 .75rem; }
h1 { font-weight: 300; font-size: clamp(2.1rem, 5vw, 3.1rem); letter-spacing: -.005em; }
h2 { font-weight: 600; font-size: clamp(1.35rem, 2.6vw, 1.7rem); }
h3 { font-weight: 600; font-size: 1.1rem; }
p { margin: 0 0 1rem; max-width: 40rem; }
.lead { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--cloud); font-weight: 400; }

.label {
  display: inline-block; margin: 0 0 .6rem;
  font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; color: var(--cyan);
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 9vw, 7rem) clamp(2.5rem, 7vw, 5rem); text-align: center; }
/* The primary lockup files include ½ X padding; the margin adds the rest of the X clear space. */
.hero-logo { display: block; margin: 0 auto 2.5rem; width: min(100%, 46rem); padding: 4.5%; }
.hero-logo img { width: 100%; }
.hero .tagline-text { margin: -1.5rem auto 2rem; color: var(--mist); }
.hero .lead { margin-inline: auto; }

/* Under 380 px the wordmark replaces the primary lockup (brand minimum 320 px). */
@media (min-width: 380px) {
  .hero .tagline-text {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* ---------- Sections and cards ---------- */
.section { padding-block: clamp(2rem, 6vw, 4rem); }
.page-intro { padding-block: clamp(2.5rem, 7vw, 5rem) 1rem; }

.card {
  position: relative; background: rgba(17, 28, 66, .72); border: 1px solid rgba(184, 192, 218, .16);
  border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.5rem);
}
.card::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px;
  border-radius: var(--radius) var(--radius) 0 0; background: var(--gradient);
}
.teaser { display: block; }

.teaser-art { width: 100%; border-radius: calc(var(--radius) - 4px); margin: 0 0 1.5rem; background: var(--navy); }
.teaser h2, .prose .teaser h2 { margin-top: .25rem; margin-bottom: .5rem; }
.teaser p:last-child { margin-bottom: 0; }

.prose { max-width: 44rem; }
.prose h2 { margin-top: 2.25rem; }
.prose ul { padding-left: 1.25rem; margin: 0 0 1rem; }
.prose li { margin-bottom: .4rem; }
.muted { color: var(--mist); font-size: .95rem; }

/* Area cards on the home page: the whole card is clickable via the heading link. */
.area-grid { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .area-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .area-grid { grid-template-columns: repeat(4, 1fr); } }
.area-card { padding: 1.5rem; transition: border-color .15s ease, background-color .15s ease; }
.area-card h3 { margin-bottom: .5rem; }
.area-card h3 a { color: var(--white); text-decoration: none; }
.area-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.area-card h3 a::before { content: "\2192"; float: right; margin-left: .5rem; color: var(--cyan); }
.area-card:hover, .area-card:focus-within { border-color: rgba(17, 197, 208, .6); background: rgba(17, 28, 66, .95); }
.area-card h3 a:focus-visible { outline: none; }
.area-card:focus-within { outline: 3px solid var(--cyan); outline-offset: 3px; }
.area-card p { margin: 0; font-size: .97rem; }

/* ---------- Buttons ---------- */
.button {
  display: inline-block; padding: .85rem 1.6rem; border-radius: 999px;
  border: 2px solid transparent;
  background: linear-gradient(var(--navy), var(--navy)) padding-box, var(--gradient) border-box;
  color: var(--white); font-weight: 600; font-size: 1rem; text-decoration: none; letter-spacing: .02em;
}
.button:hover { background: linear-gradient(var(--navy-2), var(--navy-2)) padding-box, var(--gradient) border-box; color: var(--white); }
.email { font-weight: 500; word-break: break-word; }

/* ---------- Footer ---------- */
.site-footer { margin-top: 3rem; padding-block: 2rem 2.5rem; position: relative; font-size: .9rem; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--gradient); opacity: .7; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; justify-content: space-between; }
.site-footer p { margin: 0; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; }
.site-footer a { color: var(--mist); }
.site-footer a:hover { color: var(--white); }

/* ---------- 404 ---------- */
.notfound { text-align: center; padding-block: clamp(4rem, 12vw, 8rem); }
.notfound img { width: 120px; margin: 0 auto 2rem; }
.notfound p { margin-inline: auto; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
@media print {
  body { background: #fff; color: #000; }
  .site-nav, .skip-link, body::before { display: none; }
}

/* ===== Background variant v1: near-black space (#0B0B12) with a subtle star field =====
   Neutral near-black removes the blue/violet cast, so the violet-to-cyan mark separates cleanly. */
:root { --navy: #0B0B12; --navy-2: #16161F; }
body {
  background-color: #0B0B12;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 12%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 64% 42%, rgba(184,192,218,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 32% 66%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 74%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 6% 88%, rgba(184,192,218,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 46% 8%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 40%, rgba(255,255,255,.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 30%, rgba(255,255,255,.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 54% 82%, rgba(255,255,255,.3) 50%, transparent 51%);
}
.card { background: rgba(22, 22, 31, .85); border-color: rgba(184, 192, 218, .14); }
.area-card:hover, .area-card:focus-within { background: rgba(28, 28, 40, .95); }