/*
 * Data Nexus — theme taken from the company deck.
 * Warm paper background, near-black grotesque type, thin ink rules, and a single
 * orange accent used the way the slides use it: as a slash, never as a fill.
 */
/* Inter — the same self-hosted files the main site (datanexus.group) uses. */
@font-face {
    font-family: "Inter";
    src: url("../../fonts/inter-cyrillic.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Inter";
    src: url("../../fonts/inter-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

[data-theme="nexus"] {
    color-scheme: light;

    --color-base-100: #f7f1e8;
    --color-base-200: #f1e9dc;
    --color-base-300: #e8e2d8;
    --color-base-content: #1a1a1a;

    /* Buttons are ink on paper, like the deck's headlines. */
    --color-primary: #1a1a1a;
    --color-primary-content: #f7f1e8;

    --color-secondary: #6e6b66;
    --color-secondary-content: #f7f1e8;

    /* The brand slash. */
    --color-accent: #e85a2a;
    --color-accent-content: #ffffff;

    --color-neutral: #1a1a1a;
    --color-neutral-content: #f7f1e8;

    --color-info: #3b5b7a;
    --color-info-content: #ffffff;
    --color-success: #2f6b45;
    --color-success-content: #ffffff;
    --color-warning: #b7791f;
    --color-warning-content: #ffffff;
    --color-error: #c2331a;
    --color-error-content: #ffffff;

    --radius-selector: 0.25rem;
    --radius-field: 0.25rem;
    --radius-box: 0.375rem;
    --size-selector: 0.25rem;
    --size-field: 0.25rem;
    --border: 1px;
    --depth: 0;
    --noise: 0;
}

[data-theme="nexus"] body,
[data-theme="nexus"] .btn,
[data-theme="nexus"] input,
[data-theme="nexus"] textarea,
[data-theme="nexus"] select {
    font-family: "Inter", "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

[data-theme="nexus"] body {
    -webkit-font-smoothing: antialiased;
}

/* The deck relies on hairline rules rather than shadows. */
[data-theme="nexus"] .shadow,
[data-theme="nexus"] .shadow-sm,
[data-theme="nexus"] .shadow-md,
[data-theme="nexus"] .shadow-lg,
[data-theme="nexus"] .shadow-xl {
    box-shadow: none;
}

[data-theme="nexus"] .card {
    border: 1px solid var(--color-base-300);
}

[data-theme="nexus"] .btn {
    font-weight: 600;
    letter-spacing: -0.005em;
}

[data-theme="nexus"] .menu :where(li > a.menu-active, li > a.active) {
    background: var(--color-primary);
    color: var(--color-primary-content);
}

/* ---- Brand elements -------------------------------------------------- */

/* Orange slash bullet from the slides: <span class="dn-slash"></span> */
.dn-slash {
    display: inline-block;
    flex: none;
    height: 1.1em;
    aspect-ratio: 64 / 82;
    background: #e85a2a;
    clip-path: polygon(75% 0, 100% 0, 25% 100%, 0 100%);
    margin-right: 0.45em;
    vertical-align: -0.12em;
}

.dn-display {
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.08;
}

.dn-rule {
    border: 0;
    border-top: 1px solid #1a1a1a;
}

.dn-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.55;
}

.dn-wordmark {
    display: block;
    height: 1.25rem;
    width: auto;
}

/* Indicator: the phrase fades between states. */
.dn-phrase {
    transition: opacity 0.35s ease;
}

/* Result body — reads like a printed report on the paper background. */
[data-theme="nexus"] .content-body h1,
[data-theme="nexus"] .content-body h2 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

[data-theme="nexus"] .content-body h1::before,
[data-theme="nexus"] .content-body h2::before {
    content: "";
    display: inline-block;
    height: 1em;
    aspect-ratio: 64 / 82;
    background: #e85a2a;
    clip-path: polygon(75% 0, 100% 0, 25% 100%, 0 100%);
    margin-right: 0.4em;
    vertical-align: -0.1em;
}

[data-theme="nexus"] .content-body h2 {
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-base-300);
}

[data-theme="nexus"] .content-body table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.9rem;
}

[data-theme="nexus"] .content-body th,
[data-theme="nexus"] .content-body td {
    border: 1px solid var(--color-base-300);
    padding: 0.45rem 0.6rem;
    text-align: left;
    vertical-align: top;
}

[data-theme="nexus"] .content-body th {
    background: var(--color-base-200);
    font-weight: 600;
}

[data-theme="nexus"] .content-body blockquote {
    border-left: 3px solid #e85a2a;
    padding-left: 0.9rem;
    opacity: 0.85;
}

/*
 * Masthead, as on datanexus.group: the logo carries its own rule (1.5px at
 * 338.5/368 of its height, broken where the slash crosses). The logo sits on the
 * header rule and the rule continues from the logo's right edge to the page edge.
 */
.dn-masthead {
    position: relative;
}

.dn-masthead .dn-logo {
    position: absolute;
    left: var(--lg-x, 0px);
    bottom: calc(0.75px - 0.08016 * var(--lg-h, 1.5rem));
    height: var(--lg-h, 1.5rem);
    width: auto;
    max-width: none;
}

.dn-masthead::after {
    content: "";
    position: absolute;
    left: calc(var(--lg-x, 0px) + 3.5788 * var(--lg-h, 1.5rem) - 1px);
    right: 0;
    bottom: 0;
    border-top: 1.5px solid #1a1a1a;
}

.dn-ink-rule {
    border-bottom: 1.5px solid #1a1a1a !important;
}