/*!
 * @license Apache License 2.0
 * @file orch/docs/styles.css
 * @title Orch Public Website Styles
 * @description Static CSS for the Orch public landing page.
 * @version 0.1.4
 */

@font-face {
    font-family: "TASA Orbiter";
    src: url("./fonts/TASAOrbiter-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: "TASA Orbiter";
    src: url("./fonts/TASAOrbiter-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "TASA Orbiter";
    src: url("./fonts/TASAOrbiter-SemiBold.woff2") format("woff2");
    font-weight: 650;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "TASA Orbiter";
    src: url("./fonts/TASAOrbiter-Bold.woff2") format("woff2");
    font-weight: 720;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "TASA Orbiter";
    src: url("./fonts/TASAOrbiter-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}


:root {
    --color-bg: #f4f1ea;
    --color-surface: #f4f1ea;
    --color-text: #181818;
    --color-muted: #68645d;
    --color-button-bg: #181818;
    --color-button-text: #f4f1ea;
    --color-button-border: #181818;
    --color-github-button-bg: #68645d;
    --color-github-button-text: #f4f1ea;
    --color-github-button-border: #68645d;
    --color-focus: #181818;

    --font-sans:
        "TASA Orbiter", "Helvetica Neue", Helvetica, Arial, "Nimbus Sans",
        "Liberation Sans", ui-sans-serif, system-ui, -apple-system,
        BlinkMacSystemFont, "Segoe UI", sans-serif;

    --page-padding: clamp(1.25rem, 4vw, 4rem);
    --hero-padding-block: clamp(3.5rem, 10vw, 7rem);
    --hero-padding-inline: clamp(1.5rem, 6vw, 6rem);
    --hero-width: min(100%, 128rem);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 none;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: inherit;
    vertical-align: baseline;
    outline: 0;
}

html {
    min-block-size: 100%;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    min-block-size: 100%;
}

.site-shell {
    display: grid;
    min-block-size: 100svh;
    place-items: center;
    padding: var(--page-padding);
}

.hero {
    inline-size: var(--hero-width);
    padding: var(--hero-padding-block) var(--hero-padding-inline);
    background: var(--color-surface);
    text-align: center;
}

.wordmark {
    margin: 0 0 clamp(1rem, 2.4vw, 1.6rem);
    color: var(--color-text);
    font-size: clamp(5.5rem, 17vw, 28rem);
    font-weight: 720;
    line-height: 0.82;
}

.tagline {
    margin: 0;
    color: var(--color-muted);
    font-size: clamp(1.05rem, 2vw, 1.5rem);
    font-weight: 450;
    line-height: 1.45;
}

.specimen-copy {
    max-inline-size: 34rem;
    margin: clamp(1rem, 2.2vw, 1.4rem) auto 0;
    color: var(--color-muted);
    font-size: clamp(0.94rem, 1.6vw, 1.1rem);
    font-weight: 430;
    line-height: 1.55;
}

.cta-row {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-block-start: clamp(2rem, 5vw, 3.25rem);
}

.download-cta,
.github-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 3rem;
    padding: 0.85rem 1.3rem;
    border: 1px solid currentColor;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    line-height: 1;
    text-decoration: none;
    transition:
        background-color 160ms ease,
        color 160ms ease,
        border-color 160ms ease;
}

.download-cta {
    border-color: var(--color-button-border);
    background: var(--color-button-bg);
    color: var(--color-button-text);
}

.github-cta {
    border-color: var(--color-github-button-border);
    background: var(--color-github-button-bg);
    color: var(--color-github-button-text);
}

.download-cta:hover,
.github-cta:hover {
    background: transparent;
    color: var(--color-text);
}

.download-cta:focus-visible,
.github-cta:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 4px;
}

.download-cta[aria-disabled="true"],
.github-cta[aria-disabled="true"] {
    opacity: 0.86;
}

.visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 42rem) {
    .site-shell {
        place-items: stretch;
    }

    .hero {
        display: grid;
        min-block-size: calc(100svh - (var(--page-padding) * 2));
        align-content: center;
    }

    .wordmark {
        letter-spacing: -0.07em;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}