@font-face {
    /* Body text. SIL OFL, official Google Font -- chosen after a four-way
       trial (Golifez Bright, Libre B Plassery, Alice, Ovo). */
    font-family: 'Alice';
    src: url('alice.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Cinzel';
    src: url('cinzel.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Cinzel';
    src: url('cinzel-bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

:root {
    /* Warm starlight neutral (not stark white) — the base for all text colors */
    --ink-rgb: 245, 240, 227;
    --gold: #ffd700;
    --gold-soft: #e8c974;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    width: 100vw;
    overflow-x: hidden;
    /* Solid fallback matching the nebula gradient's midtone, in case
       .starfield hasn't painted yet or JS/CSS support is unusual. */
    background-color: #1e293b;
}

/* The colored nebula glow is a plain, static layer -- no animation at all.
   Fills the viewport exactly; nothing here needs oversizing since it never
   moves. */
.starfield {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 15% 85%, rgba(88, 28, 135, 0.28) 0%, transparent 45%),
        radial-gradient(ellipse at 85% 75%, rgba(49, 46, 129, 0.32) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 50%, rgba(25, 42, 86, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(30, 58, 138, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 40% 40%, rgba(29, 78, 216, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 70%, rgba(37, 99, 235, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 10% 80%, rgba(59, 130, 246, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 90%, rgba(30, 41, 59, 0.3) 0%, transparent 50%),
        linear-gradient(135deg, #020617 0%, #0c1426 25%, #1e293b 50%, #334155 75%, #475569 100%);
    background-size:
        140% 140%,
        140% 140%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%;
}

/* Each "star" is now its own small element that drifts independently --
   own direction, distance, speed, and start offset (via the --x/--y/--dx/
   --dy/--duration/--delay custom properties JS sets per dot) -- rather
   than one shared layer moving as a single rigid unit, which is what made
   the old approach read as "sliding together" instead of wandering
   independently like fireflies. Each dot's own transform animation runs on
   the compositor thread, same GPU-accelerated reasoning as before, just
   applied per-dot instead of to one giant layer. */
.fireflies {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.firefly {
    position: absolute;
    top: var(--y);
    left: var(--x);
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: var(--gold-soft);
    box-shadow: 0 0 4px 1px rgba(232, 201, 116, 0.5);
    opacity: 0.85;
    animation: firefly-drift var(--duration) ease-in-out var(--delay) infinite alternate;
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .firefly {
        animation: none;
    }
}

@keyframes firefly-drift {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(var(--dx), var(--dy));
    }
    100% {
        transform: translate(calc(var(--dx) * -0.6), calc(var(--dy) * 0.8));
    }
}

.header {
    height: 60px;
    background-color: transparent;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding: 0 10px 8px 10px;
    z-index: 10000;
}

.menu-button {
    width: 60px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: none;
    border-radius: 4px;
    color: rgb(var(--ink-rgb));
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 8px;
    z-index: 10001;
}

.sparkle {
    position: absolute;
    font-size: 16px;
    color: #ffd700;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.sparkle-1 {
    top: 8px;
    left: 20px;
}

.sparkle-2 {
    top: 20px;
    right: 18px;
    font-size: 14px;
}

.sparkle-3 {
    bottom: 12px;
    left: 12px;
    font-size: 15px;
}


.menu-button.active .sparkle-1 {
    animation: sparkleFloat1 0.8s ease-out;
}

.menu-button.active .sparkle-2 {
    animation: sparkleFloat2 0.8s ease-out 0.1s;
}

.menu-button.active .sparkle-3 {
    animation: sparkleFloat3 0.8s ease-out 0.2s;
}



@keyframes sparkleFloat1 {
    0% { transform: translate(0, 0) scale(1); opacity: 0.8; }
    50% { transform: translate(-3px, -5px) scale(1.3); opacity: 1; }
    100% { transform: translate(0, 0) scale(1); opacity: 0.8; }
}

@keyframes sparkleFloat2 {
    0% { transform: translate(0, 0) scale(1); opacity: 0.8; }
    50% { transform: translate(4px, -3px) scale(1.2); opacity: 1; }
    100% { transform: translate(0, 0) scale(1); opacity: 0.8; }
}

@keyframes sparkleFloat3 {
    0% { transform: translate(0, 0) scale(1); opacity: 0.8; }
    50% { transform: translate(-2px, 4px) scale(1.1); opacity: 1; }
    100% { transform: translate(0, 0) scale(1); opacity: 0.8; }
}

.dropdown-menu {
    position: absolute;
    top: 70px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 8px;
    padding: 10px 0;
    min-width: 150px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 10002;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu a {
    display: block;
    padding: 12px 20px;
    color: rgba(var(--ink-rgb), 0.8);
    text-decoration: none;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.04em;
    font-size: 14px;
    transition: all 0.3s ease;
}

.dropdown-menu a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgb(var(--ink-rgb));
    padding-left: 25px;
}

.logo {
    color: rgb(var(--ink-rgb));
    font-family: 'Cinzel', serif;
    font-size: clamp(1rem, 1.6vw + .6rem, 1.35rem);
    margin-left: 15px;
    font-weight: 400;
    letter-spacing: 0.22em;
    position: relative;
    top: 4px;
}

.main-content {
    padding-top: 80px;
    height: calc(100vh - 80px);
    overflow-y: auto;
    padding-left: 20px;
    padding-right: 20px;
}

#homeContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    min-height: 60vh;
    width: 100%;
    margin: 0;
    padding: 40px 0;
}

#homeContent > * {
    animation: heroRise 0.9s ease-out both;
}

#homeContent > *:nth-child(2) {
    animation-delay: 0.12s;
}

#homeContent > *:nth-child(3) {
    animation-delay: 0.24s;
}

#homeContent > *:nth-child(4) {
    animation-delay: 0.36s;
}

@media (prefers-reduced-motion: reduce) {
    #homeContent > * {
        animation: none;
    }
}

@keyframes heroRise {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.home-heading {
    max-width: 700px;
    margin: 0;
    text-align: center;
    font-family: 'Cinzel', serif;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgba(var(--ink-rgb), 0.95);
    text-shadow:
        0 0 20px rgba(232, 201, 116, 0.35),
        0 0 48px rgba(232, 201, 116, 0.18);
    text-wrap: balance;
}

.home-subtext {
    max-width: 600px;
    margin: 0;
    text-align: center;
    font-family: 'Alice', serif;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 300;
    color: rgb(183, 198, 255);
    text-wrap: balance;
}

.product-teaser {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    max-width: 420px;
    padding: 20px 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 0 30px rgba(232, 201, 116, 0.08);
}

.product-teaser:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.product-teaser-seal {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    fill: none;
    stroke: var(--gold-soft);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.product-teaser-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.product-teaser-eyebrow {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-soft);
}

.product-teaser-name {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 22px;
    color: rgb(var(--ink-rgb));
    margin-top: 2px;
}

.product-teaser-tagline {
    font-family: 'Alice', serif;
    font-size: 13px;
    color: rgba(var(--ink-rgb), 0.7);
    margin-top: 4px;
}

.product-teaser-arrow {
    color: var(--gold-soft);
    font-size: 20px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.product-teaser:hover .product-teaser-arrow {
    transform: translateX(4px);
}


.content-section {
    margin-bottom: 30px;
    color: rgb(var(--ink-rgb));
    font-family: 'Alice', serif;
}

.content-section h2 {
    font-size: 24px;
    margin-bottom: 15px;
    color: rgba(var(--ink-rgb), 0.9);
    font-family: 'Cinzel', serif;
    letter-spacing: 0.02em;
    text-wrap: balance;
    text-shadow: 0 0 24px rgba(232, 201, 116, 0.15);
}

.content-section p {
    font-size: 18px;
    line-height: 1.6;
    color: rgb(183, 198, 255);
    margin-bottom: 15px;
}

.content-page {
    padding: 40px 20px;
    max-width: 800px;
    margin: 0 auto;
}

.custos-hero {
    text-align: center;
    margin-bottom: 50px;
}

.custos-seal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 18px;
}

.seal-line {
    display: block;
    width: 56px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232, 201, 116, 0.65));
}

.seal-line:last-child {
    background: linear-gradient(90deg, rgba(232, 201, 116, 0.65), transparent);
}

.seal-mark {
    color: var(--gold-soft);
    font-size: 15px;
}

.custos-wordmark {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: clamp(3rem, 9vw, 5.5rem);
    letter-spacing: 0.04em;
    color: rgb(var(--ink-rgb));
    text-shadow:
        0 0 16px rgba(232, 201, 116, 0.55),
        0 0 40px rgba(232, 201, 116, 0.32),
        0 0 90px rgba(232, 201, 116, 0.18);
}

.custos-tagline {
    margin: 12px 0 0;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold-soft);
    text-wrap: balance;
}

.custos-content {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

.feature-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 10px 25px 25px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.feature-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.feature-item h3 {
    color: rgba(var(--ink-rgb), 0.95);
    font-size: 18px;
    margin-bottom: 15px;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.feature-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    fill: none;
    stroke: var(--gold-soft);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.feature-item p {
    color: rgba(var(--ink-rgb), 0.8);
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    /* Lines up with the header text, not the icon -- icon width (22px) +
       the h3's gap (8px). */
    margin-left: 30px;
}

.footer {
    margin-top: 80px;
    padding: 30px 0 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    color: rgb(var(--ink-rgb));
    font-family: 'Alice', serif;
}

/* A da Vinci notebook-page texture (gear study, compass/circle-square
   proportion construction, a dimension guide line, cross-hatch shading,
   and a few generic geometry/ratio annotations) laid faintly over the
   nebula background -- a fixed full-viewport layer, same treatment as
   .starfield/.fireflies, sitting behind all real content. */
.sketchbook {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.9s ease;
}

.sketchbook img {
    position: absolute;
    left: 50%;
    bottom: 60px;
    width: min(720px, 85vw);
    height: auto;
    transform: translateX(-50%);
    mix-blend-mode: screen;
    opacity: 0.16;
}

/* Custos-only backdrop: a faint sketch of a library interior. .starfield's
   own bottom gradient stop is fully opaque, so this has to sit above it
   (not below) to be visible at all -- it replaces the nebula outright for
   this page, with the fireflies still layered on top for continuity. Only
   shown while the Custos content is active -- see .page-custos toggling in
   script.js's showContent(). */
.custos-backdrop {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.9s ease;
}

.custos-backdrop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.page-custos .custos-backdrop {
    opacity: 0.5;
}

body.page-custos .sketchbook {
    opacity: 0;
}

.footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 25px;
}

.footer-links a {
    color: rgba(var(--ink-rgb), 0.8);
    text-decoration: none;
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
    text-transform: uppercase;
}

.footer-links a:hover {
    color: rgb(var(--ink-rgb));
}

.footer-links a::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.3);
    margin-left: 30px;
    vertical-align: middle;
}

.footer-links a:last-child::after {
    display: none;
}

.copyright {
    text-align: center;
    font-size: 12px;
    color: rgba(var(--ink-rgb), 0.5);
    line-height: 1.4;
}