/*
    Home page (Components/Pages/Home.razor). The page loads no Bootstrap and no app.css.
    The scroll-scrub section (hero with the four scroll-driven clips) is driven by home.js.
    The fonts are linked from Home.razor.
*/

html, body {
    margin: 0;
    background: #141517
}

.scroll-scrub {
    --ss-accent: #F87000;
    --ss-bg: #141517;
    --ss-ink: #F4F1EC;
    --ss-muted: #A7A39C;
    --ss-progress: 0;
    position: relative;
    isolation: isolate;
    color: var(--ss-ink);
    background: var(--ss-bg);
}

.scroll-scrub__stage {
    position: sticky;
    top: 0;
    z-index: 0;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    background: var(--ss-bg);
}

.scroll-scrub__media,
.scroll-scrub__layer,
.scroll-scrub__picture,
.scroll-scrub__poster,
.scroll-scrub__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.scroll-scrub__media {
    z-index: 0;
}

.scroll-scrub__layer {
    margin: 0;
    overflow: hidden;
    opacity: 0;
    will-change: opacity;
}

    .scroll-scrub__layer:first-child {
        opacity: 1;
    }

.scroll-scrub__layer--scene {
    --ss-object-position: 50% 55%;
    --ss-mobile-position: 50% 55%;
}

.scroll-scrub__poster,
.scroll-scrub__video {
    display: block;
    object-fit: cover;
    object-position: var(--ss-object-position);
}

.scroll-scrub__poster {
    z-index: 0;
}

.scroll-scrub__video {
    z-index: 1;
}

.scroll-scrub__layer[data-video-painted="true"] .scroll-scrub__poster {
    visibility: hidden;
}

/* along the fixed header's bottom edge: at the top of the stage the header's background hid it */
.scroll-scrub__progress {
    position: absolute;
    z-index: 5;
    top: var(--fa-nav-height);
    right: 0;
    left: 0;
    height: 2px;
    background: color-mix(in srgb, var(--ss-ink) 14%, transparent);
    pointer-events: none;
}

    .scroll-scrub__progress span {
        display: block;
        width: 100%;
        height: 100%;
        background: var(--ss-accent);
        transform: scaleX(var(--ss-progress));
        transform-origin: left center;
    }

/* starts where the fixed header (.fa-nav, z-index 40) ends: under it the buttons were hidden and the header took their
   clicks (on phones the language picker and the wordmark) */
.scroll-scrub__route {
    position: absolute;
    z-index: 6;
    top: var(--fa-nav-height);
    right: clamp(1rem, 4vw, 4rem);
    left: clamp(1rem, 4vw, 4rem);
    display: flex;
    justify-content: flex-end;
    gap: 0.25rem;
    pointer-events: auto;
}

.scroll-scrub__route-button {
    min-height: 2.75rem;
    padding: 0.65rem 0.9rem;
    border: 0;
    color: var(--ss-muted);
    background: transparent;
    font: inherit;
    cursor: pointer;
}

    .scroll-scrub__route-button:hover,
    .scroll-scrub__route-button[aria-current="step"] {
        color: var(--ss-ink);
    }

    .scroll-scrub__route-button[aria-current="step"] {
        text-decoration: underline;
        text-decoration-color: var(--ss-accent);
        text-decoration-thickness: 0.15em;
        text-underline-offset: 0.3em;
    }

    .scroll-scrub__route-button:focus-visible {
        outline: 2px solid var(--ss-accent);
        outline-offset: 3px;
    }

.scroll-scrub__story {
    position: relative;
    z-index: 3;
    margin-top: -100dvh;
    pointer-events: none;
}

.scroll-scrub__chapter,
.scroll-scrub__connector-band {
    position: relative;
}

/* how much scrolling each chapter (and so each clip) gets */
#intrare, #raport {
    min-height: 130dvh;
}

#captura, #analiza {
    min-height: 150dvh;
}

.scroll-scrub__chapter-pin {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    min-height: 100dvh;
    padding: clamp(5rem, 9vw, 8rem) clamp(1.25rem, 6vw, 6rem);
    pointer-events: none;
}

.scroll-scrub__chapter[data-align="right"] .scroll-scrub__chapter-pin {
    justify-content: flex-end;
}

.scroll-scrub__copy {
    position: relative;
    width: min(40rem, 48vw);
    pointer-events: auto;
}

    .scroll-scrub__copy::before {
        position: absolute;
        z-index: -1;
        inset: -3rem -5rem;
        content: "";
        background: radial-gradient( ellipse at center, color-mix(in srgb, var(--ss-bg) 88%, transparent) 0%, color-mix(in srgb, var(--ss-bg) 58%, transparent) 52%, transparent 76% );
        pointer-events: none;
    }

.scroll-scrub__kicker {
    max-width: 30ch;
    margin: 0 0 1rem;
    color: var(--ss-accent);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.scroll-scrub__title {
    max-width: 13ch;
    margin: 0;
    color: var(--ss-ink);
    font: inherit;
    font-size: clamp(2.75rem, 6vw, 6.75rem);
    font-weight: 700;
    line-height: 0.94;
    letter-spacing: -0.045em;
    text-wrap: balance;
}

.scroll-scrub__body {
    max-width: 42ch;
    margin: 1.5rem 0 0;
    color: var(--ss-muted);
    font-size: clamp(1rem, 1.35vw, 1.2rem);
    line-height: 1.55;
}

.scroll-scrub__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

    .scroll-scrub__tags li {
        padding: 0.45rem 0.7rem;
        border: 1px solid color-mix(in srgb, var(--ss-ink) 20%, transparent);
        color: var(--ss-ink);
        font-size: 0.82rem;
    }

.scroll-scrub__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

@media (max-width: 860px) {
    .scroll-scrub__poster,
    .scroll-scrub__video {
        object-position: var(--ss-mobile-position);
    }

    .scroll-scrub__route {
        right: max(0.75rem, env(safe-area-inset-right));
        left: max(0.75rem, env(safe-area-inset-left));
        justify-content: flex-start;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
    }

    .scroll-scrub__route-button {
        flex: 0 0 auto;
    }

    .scroll-scrub__chapter-pin,
    .scroll-scrub__chapter[data-align="right"] .scroll-scrub__chapter-pin {
        align-items: flex-end;
        justify-content: flex-start;
        padding: 6.5rem max(1.25rem, env(safe-area-inset-right)) calc(4rem + env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
    }

    .scroll-scrub__copy {
        width: min(100%, 36rem);
    }

        .scroll-scrub__copy::before {
            inset: -3rem -2rem;
            background: linear-gradient( to top, var(--ss-bg) 0%, color-mix(in srgb, var(--ss-bg) 82%, transparent) 58%, transparent 100% );
        }

    .scroll-scrub__title {
        max-width: 14ch;
        font-size: clamp(2.3rem, 11vw, 4.5rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-scrub__chapter {
        min-height: 100dvh !important;
    }

    .scroll-scrub__connector-band {
        display: none;
    }

    .scroll-scrub__progress span {
        transition: none;
    }
}

/*
    Barlow Condensed, IBM Plex Sans and IBM Plex Mono come from the Google Fonts <link> in Home.razor.
    Do not add an @import for them here: an @import after other rules is invalid and browsers ignore it.
*/

:root {
    --fa-ink: #141517;
    --fa-ink-2: #2b2e33;
    --fa-ink-3: #1d1f23;
    --fa-bone: #f4f1ec;
    --fa-muted: #a7a39c;
    --fa-line: rgba(244, 241, 236, 0.14);
    --fa-orange: #f87000;
    --fa-orange-deep: #da6200;
    --fa-amber: #fb9d3c;
    --fa-paper: #f7f6f4;
    --fa-paper-ink: #1d1f23;
    --fa-paper-line: #dad6cf;
    --fa-display: "Barlow Condensed", "Arial Narrow", sans-serif;
    --fa-body: "IBM Plex Sans", system-ui, sans-serif;
    --fa-mono: "IBM Plex Mono", ui-monospace, monospace;
    --fa-gutter: clamp(20px, 5vw, 72px);
    --fa-max: 1240px;
    --fa-nav-height: 64px;
}

.fa-site {
    font-family: var(--fa-body);
    color: var(--fa-bone);
    background: var(--fa-ink);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

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

    .fa-site h1, .fa-site h2, .fa-site h3, .fa-site p, .fa-site ul {
        margin: 0;
    }

    .fa-site ul {
        padding: 0;
        list-style: none;
    }

    .fa-site a {
        color: inherit;
        text-decoration: none;
    }

    .fa-site :focus-visible {
        outline: 2px solid var(--fa-amber);
        outline-offset: 3px;
    }

    .fa-site section[id] {
        scroll-margin-top: 72px;
    }

    .fa-site ::selection {
        background: var(--fa-orange);
        color: #fff;
    }

.fa-site {
    caret-color: var(--fa-orange);
    accent-color: var(--fa-orange);
    scrollbar-color: var(--fa-ink-2) var(--fa-ink);
}

    .fa-site .fa-pv, .fa-site .fa-limits, .fa-site .scroll-scrub__tags, .fa-site address {
        font-variant-numeric: tabular-nums;
    }

.fa-skip {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 60;
    padding: 10px 14px;
    background: var(--fa-bone);
    color: var(--fa-ink);
    font-size: 14px;
    font-weight: 500;
    transform: translateY(-200%);
}

    .fa-skip:focus-visible {
        transform: translateY(0);
        outline-color: var(--fa-orange);
    }

/* Journey typography: the engine draws layout, the brand draws type. */
.fa-site .scroll-scrub__kicker {
    font-family: var(--fa-mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fa-amber);
}

.fa-site .scroll-scrub__title {
    font-family: var(--fa-display);
    font-style: italic;
    font-weight: 800;
    font-size: clamp(40px, 6.4vw, 88px);
    line-height: 0.94;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.fa-site .scroll-scrub__body {
    font-size: clamp(16px, 1.25vw, 19px);
    line-height: 1.5;
    color: var(--fa-bone);
    max-width: 34ch;
}

.fa-site .scroll-scrub__tags li {
    font-family: var(--fa-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
}

/* ---------- nav ---------- */
.fa-nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: var(--fa-nav-height);
    padding: 0 var(--fa-gutter);
    background: linear-gradient(180deg, rgba(20, 21, 23, 0.92), rgba(20, 21, 23, 0));
}

.fa-wordmark {
    display: inline-flex;
    flex-direction: column;
    line-height: 1;
}

    .fa-wordmark b {
        font-family: var(--fa-display);
        font-style: italic;
        font-weight: 800;
        font-size: 26px;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

        .fa-wordmark b::after {
            content: "";
            display: block;
            height: 2px;
            width: 42%;
            margin-top: 2px;
            background: var(--fa-orange);
        }

    .fa-wordmark small {
        font-family: var(--fa-mono);
        font-size: 9px;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: var(--fa-amber);
        margin-top: 4px;
    }

.fa-nav__links {
    display: flex;
    gap: 26px;
}

    .fa-nav__links a {
        font-family: var(--fa-body);
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.01em;
        color: var(--fa-muted);
        transition: color 160ms;
    }

        .fa-nav__links a:hover {
            color: var(--fa-bone);
        }

@media (max-width: 940px) {
    .fa-nav__links {
        display: none;
    }
}

/* takes the space of a button without showing it: see the balancing span in Home.razor's header.
   When the header runs out of room it gives its width up first, so the wordmark and the links never get squeezed. */
.fa-nav__balance {
    display: flex;
    min-width: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}

/* ...which is why these two keep their natural width: a fraction of a pixel less already wraps their text.
   Without the invisible item they fit down to a ~915px wide page in Romanian (~865px in English), plus the
   scrollbar, and the links hide at 940px. Measure again after changing a link, the picker or the wordmark. */
.fa-nav__brand,
.fa-nav__links {
    flex-shrink: 0;
}

/* the language picker left of the wordmark */
.fa-nav__brand {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* ---------- language picker: a <details> disclosure (Components/Layout/LanguagePicker.razor) ---------- */
.fa-lang {
    position: relative;
}

    .fa-lang summary {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 7px 9px;
        border: 1px solid var(--fa-line);
        /* solid: on phones the hero's chapter buttons run under the header, and later the header crosses the paper sections */
        background: var(--fa-ink);
        font-family: var(--fa-mono);
        font-size: 12px;
        letter-spacing: 0.14em;
        line-height: 1;
        color: var(--fa-bone);
        list-style: none;
        cursor: pointer;
        user-select: none;
        transition: border-color 160ms;
    }

        .fa-lang summary::-webkit-details-marker {
            display: none;
        }

        .fa-lang summary:hover,
        .fa-lang[open] summary {
            border-color: var(--fa-muted);
        }

    .fa-lang img {
        display: block;
        width: 21px;
        height: 14px;
        object-fit: cover;
        box-shadow: 0 0 0 1px rgba(244, 241, 236, 0.2);
    }

.fa-lang__chevron {
    width: 10px;
    height: 6px;
    color: var(--fa-muted);
    transition: transform 160ms;
}

.fa-lang[open] .fa-lang__chevron {
    transform: rotate(180deg);
}

.fa-lang__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 100%;
    display: grid;
    gap: 2px;
    padding: 4px;
    background: var(--fa-ink-2);
    border: 1px solid var(--fa-line);
    box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.7);
}

    .fa-lang__menu button {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 9px;
        border: 0;
        background: none;
        font-family: var(--fa-mono);
        font-size: 12px;
        letter-spacing: 0.14em;
        line-height: 1;
        color: var(--fa-muted);
        cursor: pointer;
        transition: background 160ms, color 160ms;
    }

        .fa-lang__menu button:hover {
            background: var(--fa-ink-3);
            color: var(--fa-bone);
        }

        .fa-lang__menu button[aria-current="true"] {
            color: var(--fa-amber);
        }

/* ---------- CTA garments (each its own identity) ---------- */
.fa-cta-book {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px 13px 24px;
    border-radius: 999px;
    background: var(--fa-orange);
    color: #fff;
    font-family: var(--fa-body);
    font-weight: 500;
    font-size: 15px;
    white-space: nowrap;
    transition: background 160ms, transform 160ms;
}

    .fa-cta-book svg {
        width: 16px;
        height: 16px;
        transition: transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
    }

    .fa-cta-book:hover {
        background: var(--fa-orange-deep);
    }

        .fa-cta-book:hover svg {
            transform: translateX(5px);
        }

.fa-cta-book--small {
    padding: 9px 16px 9px 18px;
    font-size: 13px;
}

.fa-cta-pv {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 12px 22px;
    border: 1px solid var(--fa-bone);
    border-radius: 999px;
    color: var(--fa-bone);
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
}

    .fa-cta-pv span {
        background: linear-gradient(var(--fa-amber), var(--fa-amber)) no-repeat 0 100% / 0 1px;
        transition: background-size 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
    }

    .fa-cta-pv:hover span {
        background-size: 100% 1px;
    }

.fa-cta-demo {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 16px 24px 16px 20px;
    background: var(--fa-ink-2);
    color: var(--fa-bone);
    font-size: 15px;
    font-weight: 500;
    transition: background 160ms;
}

.fa-cta-demo__rule {
    width: 18px;
    height: 1px;
    background: var(--fa-orange);
    transition: width 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.fa-cta-demo:hover {
    background: var(--fa-ink-3);
}

    .fa-cta-demo:hover .fa-cta-demo__rule {
        width: 34px;
    }

.fa-cta-plate {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--fa-mono);
    font-size: 14px;
    letter-spacing: 0.08em;
    color: var(--fa-bone);
}

    .fa-cta-plate::before, .fa-cta-plate::after {
        content: "";
        width: 10px;
        height: 18px;
        border: 1px solid var(--fa-amber);
        transition: width 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
    }

    .fa-cta-plate::before {
        border-right: 0;
    }

    .fa-cta-plate::after {
        border-left: 0;
    }

    .fa-cta-plate:hover::before, .fa-cta-plate:hover::after {
        width: 4px;
    }

/* ---------- shared section shell ---------- */
.fa-section {
    position: relative;
    padding: clamp(72px, 10vw, 140px) var(--fa-gutter);
}

.fa-section__inner {
    max-width: var(--fa-max);
    margin: 0 auto;
}

.fa-h2 {
    font-family: var(--fa-display);
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(36px, 5.2vw, 72px);
    line-height: 0.96;
    letter-spacing: -0.01em;
    margin-top: 14px;
}

.fa-lede {
    color: var(--fa-muted);
    font-size: 17px;
    line-height: 1.55;
    max-width: 56ch;
    margin-top: 16px;
}

/* ---------- Pentru cine: split ---------- */
.fa-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
    margin-top: 56px;
    border-top: 1px solid var(--fa-line);
}

.fa-split__col {
    padding: 44px 0 0;
}

    .fa-split__col + .fa-split__col {
        border-left: 1px solid var(--fa-line);
        padding-left: clamp(24px, 4vw, 56px);
    }

    .fa-split__col:first-child {
        padding-right: clamp(24px, 4vw, 56px);
    }

.fa-split h3 {
    font-family: var(--fa-display);
    font-style: italic;
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1;
}

.fa-split p {
    color: var(--fa-muted);
    margin-top: 14px;
    line-height: 1.55;
}

.fa-split ul {
    margin: 22px 0 30px;
    display: grid;
    gap: 10px;
}

.fa-split li {
    display: grid;
    grid-template-columns: 14px 1fr;
    gap: 12px;
    align-items: baseline;
    font-size: 15px;
}

    .fa-split li::before {
        content: "";
        width: 14px;
        height: 1px;
        background: var(--fa-amber);
        transform: translateY(-4px);
    }

@media (max-width: 760px) {
    .fa-split {
        grid-template-columns: minmax(0, 1fr);
    }

    .fa-split__col + .fa-split__col {
        border-left: 0;
        border-top: 1px solid var(--fa-line);
        padding-left: 0;
        margin-top: 32px;
    }

    .fa-split__col:first-child {
        padding-right: 0;
    }
}

/* ---------- Proces-verbal: the paper ---------- */
.fa-pv-section {
    background: var(--fa-paper);
    color: var(--fa-paper-ink);
}

    .fa-pv-section .fa-lede {
        color: #5b5e64;
    }

.fa-pv-wrap {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}

.fa-pv {
    position: relative;
    background: #fff;
    box-shadow: 0 24px 48px -28px rgba(20, 21, 23, 0.5);
    padding: clamp(22px, 3vw, 36px);
    font-family: var(--fa-mono);
    font-size: 13px;
}

.fa-pv__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--fa-paper-ink);
}

    .fa-pv__head .fa-wordmark b {
        font-size: 22px;
        color: var(--fa-paper-ink);
    }

    .fa-pv__head .fa-wordmark small {
        color: var(--fa-orange-deep);
    }

.fa-pv__no {
    text-align: right;
    line-height: 1.5;
    color: #5b5e64;
}

    .fa-pv__no b {
        display: block;
        color: var(--fa-paper-ink);
        font-weight: 500;
    }

.fa-pv__meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--fa-paper-line);
}

    .fa-pv__meta dt {
        font-size: 10px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #7a7d84;
    }

    .fa-pv__meta dd {
        margin: 4px 0 0;
        font-weight: 500;
    }

.fa-plate {
    display: inline-block;
    padding: 3px 8px;
    border: 1.5px solid var(--fa-paper-ink);
    border-left-width: 8px;
    border-left-color: #1f3a93;
    letter-spacing: 0.16em;
    font-weight: 500;
}

.fa-pv table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}

.fa-pv th {
    text-align: left;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7a7d84;
    font-weight: 400;
    padding: 12px 0 8px;
    border-bottom: 1px solid var(--fa-paper-line);
}

.fa-pv td {
    padding: 11px 0;
    border-bottom: 1px solid var(--fa-paper-line);
    vertical-align: top;
}

    .fa-pv td:last-child, .fa-pv th:last-child {
        text-align: right;
    }

.fa-sev {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .fa-sev::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--fa-orange);
        box-shadow: 0 0 0 3px rgba(248, 112, 0, 0.18);
    }

.fa-sev--low::before {
    background: var(--fa-amber);
}

.fa-sev--none::before {
    background: #c9c5be;
    box-shadow: none;
}

.fa-pv__foot {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 18px;
    font-size: 11px;
    color: #7a7d84;
    line-height: 1.6;
}

.fa-pv__stamp {
    position: absolute;
    right: 26px;
    bottom: 70px;
    padding: 6px 12px;
    border: 2px solid var(--fa-orange);
    color: var(--fa-orange);
    font-family: var(--fa-display);
    font-style: italic;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transform: rotate(-8deg);
    opacity: 0.85;
}

.fa-pv-points {
    margin-top: 32px;
    display: grid;
    gap: 18px;
}

    .fa-pv-points li {
        display: grid;
        grid-template-columns: 18px 1fr;
        gap: 14px;
        align-items: start;
    }

        .fa-pv-points li::before {
            content: "";
            width: 18px;
            height: 1px;
            background: var(--fa-orange-deep);
            margin-top: 11px;
        }

    .fa-pv-points b {
        display: block;
        font-family: var(--fa-display);
        font-style: italic;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 22px;
        line-height: 1;
    }

    .fa-pv-points span {
        display: block;
        color: #5b5e64;
        font-size: 15px;
        line-height: 1.5;
        margin-top: 4px;
    }

@media (max-width: 860px) {
    .fa-pv-wrap {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 520px) {
    .fa-pv__meta {
        grid-template-columns: minmax(0, 1fr);
    }

    .fa-pv__stamp {
        display: none;
    }
}

/* ---------- Cum integram: the lane ---------- */
.fa-lane {
    position: relative;
    margin-top: 56px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 40px);
}

    .fa-lane::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 11px;
        height: 1px;
        background: repeating-linear-gradient(90deg, var(--fa-amber) 0 28px, transparent 28px 44px);
        opacity: 0.6;
    }

.fa-lane__stop {
    position: relative;
    padding-top: 34px;
}

    .fa-lane__stop::before {
        content: "";
        position: absolute;
        top: 4px;
        left: 0;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: var(--fa-ink);
        border: 2px solid var(--fa-orange);
    }

    .fa-lane__stop h3 {
        font-family: var(--fa-display);
        font-style: italic;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 28px;
        line-height: 1;
    }

    .fa-lane__stop small {
        display: block;
        font-family: var(--fa-mono);
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--fa-amber);
        margin-top: 8px;
    }

    .fa-lane__stop p {
        color: var(--fa-muted);
        margin-top: 12px;
        line-height: 1.55;
        font-size: 15px;
    }

@media (max-width: 760px) {
    .fa-lane {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

        .fa-lane::before {
            display: none;
        }
}

/* ---------- Despre noi: the Pentru cine split on paper ---------- */
.fa-about {
    background: var(--fa-paper);
    color: var(--fa-paper-ink);
}

    .fa-about .fa-lede,
    .fa-about .fa-split p {
        color: #5b5e64;
    }

    /* border-color, not border-left: on narrow screens the divider moves to the top of the second column */
    .fa-about .fa-split,
    .fa-about .fa-split__col + .fa-split__col {
        border-color: var(--fa-paper-line);
    }

    .fa-about .fa-split li::before {
        background: var(--fa-orange-deep);
    }

/* the title and lede beside the video: the split's columns (stacked at 760px, like the split below) without its
   rules and top spacing. border, not border-left: on narrow screens the split puts its divider on top instead */
.fa-split--intro {
    margin-top: 0;
    border-top: 0;
}

    .fa-split--intro .fa-split__col {
        padding-top: 0;
    }

        .fa-split--intro .fa-split__col + .fa-split__col {
            border: 0;
        }

/* the video takes three quarters of its column's width and sits in the middle of the column both ways */
.fa-about__media {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* multiply: the station's white walls take the paper's colour instead of showing as a lighter box, while the car and
   the floor keep theirs; no shadow, which would lift it off the page again */
.fa-about__video {
    display: block;
    width: 75%;
    height: auto;
    border-radius: clamp(12px, 1.6vw, 20px);
    mix-blend-mode: multiply;
}

/* ---------- Statia ---------- */
.fa-station {
    background: var(--fa-ink-3);
    border-top: 1px solid var(--fa-line);
}

/* the station, then the stations to come and the limits, in the left column and the map beside both; at 760px one
   column in markup order, which puts the map between the station and the rest */
.fa-station__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "head map"
        "more map";
    gap: 48px clamp(28px, 5vw, 72px);
}

.fa-station__head {
    grid-area: head;
}

.fa-station__more {
    grid-area: more;
}

.fa-station address,
.fa-station__soon {
    font-style: normal;
    font-family: var(--fa-mono);
    font-size: 14px;
    color: var(--fa-bone);
    line-height: 1.7;
}

.fa-station address {
    margin-top: 18px;
}

/* scoped under .fa-station so the margin beats the ".fa-site h3 { margin: 0 }" reset */
.fa-station .fa-limits__label {
    font-family: var(--fa-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--fa-muted);
    margin-bottom: 14px;
}

.fa-limits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

    .fa-limits li {
        border: 1px solid var(--fa-line);
        padding: 14px;
    }

    .fa-limits b {
        display: block;
        font-family: var(--fa-display);
        font-style: italic;
        font-weight: 800;
        font-size: 34px;
        line-height: 1;
    }

    .fa-limits span {
        display: block;
        font-family: var(--fa-mono);
        font-size: 11px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--fa-muted);
        margin-top: 6px;
    }

.fa-station__cta {
    margin-top: 30px;
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}

.fa-station__note {
    color: var(--fa-muted);
    font-size: 14px;
}

.fa-station__limits {
    margin-top: 40px;
}

/* the map takes three quarters of its column's width and sits in the middle of the column both ways, like the
   "Despre noi" video */
.fa-station__map {
    grid-area: map;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fa-map {
    width: 75%;
}

.fa-map__picture {
    position: relative;
    display: block;
    border: 1px solid var(--fa-line);
    box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.8);
}

    .fa-map__picture img {
        display: block;
        width: 100%;
        height: auto;
    }

/* its tip on the station, which is the middle of the picture */
.fa-map__pin {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 37px;
    color: var(--fa-orange);
    transform: translate(-50%, -100%);
    filter: drop-shadow(0 3px 3px rgba(20, 21, 23, 0.45));
}

.fa-map__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px 16px;
    margin-top: 12px;
}

.fa-map__open {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--fa-mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fa-bone);
    transition: color 160ms;
}

    .fa-map__open svg {
        width: 14px;
        height: 14px;
    }

    .fa-map__open:hover,
    .fa-map__picture:hover + .fa-map__foot .fa-map__open {
        color: var(--fa-amber);
    }

.fa-map__credit {
    font-size: 11px;
    color: var(--fa-muted);
}

    .fa-map__credit a {
        text-decoration: underline;
    }

@media (max-width: 760px) {
    .fa-station__grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "head"
            "map"
            "more";
        row-gap: 40px;
    }
}

/* ---------- Contact ---------- */
.fa-contact {
    --fa-danger: #ff6a5c;
    border-top: 1px solid var(--fa-line);
}

.fa-contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}

/* scoped under .fa-contact so the margins beat the ".fa-site p { margin: 0 }" reset */
.fa-contact .fa-contact__direct {
    margin-top: 28px;
    font-family: var(--fa-mono);
    font-size: 14px;
    line-height: 1.7;
}

    .fa-contact__direct span {
        display: block;
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--fa-muted);
    }

    .fa-contact__direct a {
        background: linear-gradient(var(--fa-amber), var(--fa-amber)) no-repeat 0 100% / 100% 1px;
    }

.fa-contact .fa-contact__status {
    margin-bottom: 28px;
    padding: 16px 18px;
    border: 1px solid var(--fa-line);
    border-left: 3px solid var(--fa-amber);
    background: var(--fa-ink-3);
    color: var(--fa-muted);
    line-height: 1.5;
}

    .fa-contact__status b {
        display: block;
        margin-bottom: 4px;
        font-family: var(--fa-display);
        font-style: italic;
        font-weight: 800;
        font-size: 24px;
        line-height: 1;
        text-transform: uppercase;
        color: var(--fa-bone);
    }

.fa-contact .fa-contact__status--error {
    border-left-color: var(--fa-danger);
}

.fa-contact__form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 20px;
    color-scheme: dark;
}

.fa-field {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
}

.fa-field--wide {
    grid-column: 1 / -1;
}

    .fa-field label {
        font-family: var(--fa-mono);
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--fa-muted);
    }

        .fa-field label small {
            font-size: inherit;
            letter-spacing: 0.06em;
            text-transform: none;
        }

    /* the resting border is the only outline of a field, so it keeps 3:1 against the page (WCAG 1.4.11) */
    .fa-field input,
    .fa-field textarea {
        width: 100%;
        margin: 0;
        padding: 13px 14px;
        border: 1px solid rgba(244, 241, 236, 0.4);
        border-radius: 0;
        background: var(--fa-ink-3);
        color: var(--fa-bone);
        font-family: var(--fa-body);
        font-size: 16px; /* below 16px iOS zooms in on focus */
        line-height: 1.4;
        transition: border-color 160ms;
    }

    .fa-field textarea {
        min-height: 150px;
        resize: vertical;
    }

        .fa-field input:hover,
        .fa-field textarea:hover {
            border-color: rgba(244, 241, 236, 0.55);
        }

        .fa-field input:focus-visible,
        .fa-field textarea:focus-visible {
            border-color: var(--fa-amber);
            outline: 1px solid var(--fa-amber);
            outline-offset: 0;
        }

        /* Blazor marks a field that failed validation with .invalid and aria-invalid */
        .fa-field input.invalid,
        .fa-field textarea.invalid {
            border-color: var(--fa-danger);
        }

        .fa-field input:-webkit-autofill {
            -webkit-text-fill-color: var(--fa-bone);
            box-shadow: 0 0 0 1000px var(--fa-ink-3) inset;
        }

    /* the id'd container an input's aria-describedby points at; without messages it takes no grid row */
    .fa-field__error:empty {
        display: none;
    }

    .fa-field .validation-message {
        font-family: var(--fa-mono);
        font-size: 12px;
        color: var(--fa-danger);
    }

.fa-contact__trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.fa-contact__actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin-top: 6px;
}

    /* ink on orange: white on --fa-orange is 2.87:1, below the 4.5:1 WCAG AA asks for 15px text */
    .fa-contact__actions .fa-cta-book {
        border: 0;
        color: var(--fa-ink);
        cursor: pointer;
        line-height: inherit;
    }

        /* home.js disables the button while the post is on its way */
        .fa-contact__actions .fa-cta-book:disabled {
            background: var(--fa-orange-deep);
            cursor: progress;
        }

.fa-contact__note {
    color: var(--fa-muted);
    font-size: 13px;
}

@media (max-width: 760px) {
    .fa-contact__grid,
    .fa-contact__form {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- footer ---------- */
.fa-footer {
    padding: 40px var(--fa-gutter);
    border-top: 1px solid var(--fa-line);
}

.fa-footer__inner {
    max-width: var(--fa-max);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-family: var(--fa-mono);
    font-size: 12px;
    color: var(--fa-muted);
}

@media (prefers-reduced-motion: reduce) {
    .fa-site * {
        transition-duration: 0.01ms !important;
    }
}