/* Vinora site. No JS. The HTML is the page. */

:root {
    --bg: #f3ead8;
    --ink: #1a1220;
    --muted: #5c5560;
    --rule: #d4c7ae;
    --vinora: #4B1878;
    --vinora-field: #4B1878;
    --engine: #E8367A;
    --engine-field: #C4186A;
    --store: #157A63;
    --screenplay: #9E1E3A;
    --accent: #E8367A;
    --paper: #eae1cc;
    --link: #4B1878;
    --link-hover: #C4186A;
    --del: #c4122f;
    --max: 38rem;
    --font: Arial, Helvetica, "Liberation Sans", "Nimbus Sans", sans-serif;
    --mono: ui-monospace, "Cascadia Code", "Source Code Pro",
        "Liberation Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #161018;
        --ink: #f3ead8;
        --muted: #b3a79a;
        --rule: #3a3036;
        --vinora: #C4A0E8;
        --engine: #FF6BA8;
        --store: #3DCE8A;
        --screenplay: #E07084;
        --accent: #FF6BA8;
        --paper: #1e1820;
        --link: #E88BC8;
        --link-hover: #FFB3D4;
        --del: #ff6a7a;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 19px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--bg);
    font-family: var(--font);
}

::selection {
    background: var(--engine-field);
    color: #fff;
}

a {
    color: var(--link);
    text-underline-offset: 0.15em;
}

a:hover,
a:focus-visible {
    color: var(--link-hover);
}

a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

code,
kbd,
pre {
    font-family: var(--mono);
    font-size: 0.88em;
}

code {
    white-space: nowrap;
}

.wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}

/* Official lockup: mark + VINORA / PRODUCT */
.lockup {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0.85rem 0;
}

.lockup img {
    width: 3.5rem;
    height: 3.5rem;
    display: block;
    flex-shrink: 0;
}

.lockup p {
    margin: 0;
    line-height: 0.95;
    font-weight: 800;
    letter-spacing: 0.02em;
    font-size: 1.55rem;
}

.lockup .ln {
    display: block;
}

.lockup .ln-brand {
    color: #4B1878;
}

.lockup .ln-engine {
    color: #E8367A;
}

.lockup .ln-screenplay {
    color: #9E1E3A;
}

.lockup .ln-store {
    color: #157A63;
}

.lockup .ln-project {
    color: #4B1878;
}

@media (prefers-color-scheme: dark) {
    .lockup .ln-brand,
    .lockup .ln-project {
        color: #C4A0E8;
    }

    .lockup .ln-engine {
        color: #FF6BA8;
    }

    .lockup .ln-screenplay {
        color: #E07084;
    }

    .lockup .ln-store {
        color: #3DCE8A;
    }
}

a.lockup,
a.brand {
    text-decoration: none;
    color: inherit;
}

a.lockup:hover,
a.lockup:focus-visible,
a.brand:hover,
a.brand:focus-visible {
    color: inherit;
}

.lockup-hero {
    margin: 0;
}

.lockup-hero img {
    width: 3.75rem;
    height: 3.75rem;
}

.lockup-hero p {
    font-size: 1.7rem;
}

.hero-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin: 0 0 2.4rem;
}

.hero h1 {
    margin: 0;
    font-size: clamp(2rem, 6.4vw, 3.05rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.hero h1 em {
    font-style: normal;
    color: var(--accent);
}

.deck {
    margin: 1rem 0 0;
    font-size: 1.15rem;
    color: var(--ink);
    max-width: 28rem;
}

.langs {
    margin: 0;
    font-size: 0.9rem;
    color: var(--muted);
    text-align: right;
    flex-shrink: 0;
}

.langs [aria-current="page"] {
    color: var(--ink);
    font-weight: 800;
}

.langs .translate {
    display: inline-block;
    margin-top: 0.55rem;
    padding: 0.12rem 0.6rem;
    border: 1px solid var(--vinora);
    color: var(--vinora);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}

.langs .translate:hover,
.langs .translate:focus-visible {
    color: #fff;
    background: var(--vinora);
    border-color: var(--vinora);
}

.langs a.translate[aria-current="page"] {
    color: #fff;
    background: var(--vinora);
    border-color: var(--vinora);
}

/* Inner pages (marks) */
.masthead {
    text-align: center;
    margin: 0 0 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--rule);
}

.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    margin: 0;
}

.brand img {
    width: 2.55rem;
    height: 2.55rem;
    flex-shrink: 0;
    display: block;
}

.brand h1 {
    margin: 0;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.1;
}

.brand .name {
    color: var(--vinora);
}

.brand .product {
    color: var(--engine);
}

.tagline {
    margin: 0.7rem 0 0;
    font-size: 1.05rem;
    color: var(--muted);
}

.masthead .langs {
    margin: 1.1rem 0 0;
    text-align: center;
}

h1, h2, h3, .enough {
    hyphens: manual;
}

h2 {
    margin: 2.6rem 0 0.8rem;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

h3 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 800;
}

.tired {
    margin: 0;
    padding-left: 1.15em;
}

.tired li {
    margin: 0.45em 0;
}

del {
    color: var(--del);
    text-decoration: line-through;
    text-decoration-color: var(--del);
    text-decoration-thickness: 0.14em;
    text-decoration-skip-ink: none;
}

.enough {
    margin: 1.7rem 0 0;
    font-size: clamp(1.8rem, 5vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--vinora);
}

.enough + h2 {
    margin-top: 0.2rem;
}

.beats {
    margin: 0.6rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: beat;
}

.beats li {
    counter-increment: beat;
    position: relative;
    margin: 1.1rem 0 0;
    padding-left: 2.4rem;
}

.beats li::before {
    content: counter(beat);
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 800;
    color: var(--accent);
}

.beats strong {
    display: block;
    font-size: 1.08rem;
}

.beats p {
    margin: 0.2rem 0 0;
}

.deal {
    margin: 0.4rem 0 0;
    padding-left: 1.15em;
}

.deal li {
    margin: 0.7em 0;
}

.deal .no {
    margin-top: 1.1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--rule);
    list-style: none;
    margin-left: -1.15em;
}

.expand {
    color: var(--accent);
}

.prose p {
    margin: 0.85em 0;
}

.prose p:first-child {
    margin-top: 0;
}

.now {
    margin: 0.6rem 0 0;
}

.now p {
    margin: 0.8em 0 0;
}

.now p:first-child {
    margin-top: 0;
}

figure.vnrs-file {
    margin: 0.9rem 0 0;
    background: var(--paper);
    border-left: 4px solid var(--screenplay);
    max-height: 600px;
    overflow: auto;
}

.vnrs-file .fn {
    display: block;
    padding: 0.4rem 1.1rem;
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--muted);
    border-bottom: 1px solid var(--rule);
}

.vnrs {
    margin: 0;
    padding: 1rem 1.1rem 1.15rem;
    overflow-x: auto;
    background: transparent;
    color: var(--ink);
    font-family: var(--mono);
    font-size: 0.82rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.tok-h {
    font-weight: 800;
}

.tok-media {
    color: var(--store);
}

.tok-cmt,
.tok-note {
    color: var(--muted);
    font-weight: 400;
    font-style: normal;
    opacity: 0.72;
}

.tok-name {
    font-weight: 800;
    color: var(--ink);
}

.tok-punct {
    color: var(--muted);
    font-weight: 400;
}

.tok-em {
    font-style: italic;
}

.tok-choice {
    font-weight: 800;
}

.tok-path {
    color: var(--link);
}

.caption {
    margin: 0.55rem 0 0;
    color: var(--muted);
    font-size: 0.92rem;
}

.contact dt {
    font-weight: 800;
    margin: 0.9rem 0 0.15rem;
}

.contact dd {
    margin: 0;
}

.links {
    margin: 0.4rem 0 0;
    padding-left: 1.2em;
}

.links li {
    margin: 0.4em 0;
}

footer {
    margin-top: 3.2rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--rule);
    color: var(--muted);
    font-size: 0.9rem;
    text-align: center;
}

footer p {
    margin: 0;
}

@media (max-width: 32rem) {
    html {
        font-size: 17px;
    }

    .hero-top {
        flex-direction: column;
        gap: 1.1rem;
        margin-bottom: 1.8rem;
    }

    .langs {
        text-align: left;
    }

    .lockup-hero img {
        width: 3.1rem;
        height: 3.1rem;
    }

    .lockup-hero p {
        font-size: 1.4rem;
    }

    .brand h1 {
        font-size: 1.65rem;
    }
}

@media print {
    :root {
        --bg: #fff;
        --ink: #000;
        --muted: #333;
        --paper: #fff;
        --accent: #000;
        --link: #000;
        --vinora: #000;
        --engine: #000;
    }

    body {
        background: #fff;
    }

    .wrap {
        max-width: none;
        padding: 0;
    }

    .vnrs-file,
    .now {
        background: transparent;
        border: 1px solid #000;
    }

    .langs .translate {
        border-color: #000;
        color: #000;
    }

    a {
        text-decoration: none;
    }

    .lockup .ln-brand,
    .lockup .ln-engine,
    .lockup .ln-screenplay,
    .lockup .ln-store,
    .lockup .ln-project {
        color: #000;
    }
}