/* ---------------------------------------------------------------------------
   DIN - the title face of the NFriends suite (the same files the RFS, Securiam,
   Sway and PunchCard front-ends ship in public/font/din).
   --------------------------------------------------------------------------- */
@font-face {
    font-family: 'DIN';
    src: url('../font/din/din_light-webfont.woff2') format('woff2'), url('../font/din/din_light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DIN';
    src: url('../font/din/din-webfont.woff2') format('woff2'), url('../font/din/din-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DIN';
    src: url('../font/din/din_medium-webfont.woff2') format('woff2'), url('../font/din/din_medium-webfont.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DIN';
    src: url('../font/din/din_bold-webfont.woff2') format('woff2'), url('../font/din/din_bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --nf-font-title: 'DIN', 'D-DIN', 'Bahnschrift', 'Arial Narrow', sans-serif;
    --nf-sky: #23a8f2;
    --nf-cyan: #40d0f6;
    --nf-deep: #006db0;
    --nf-gold: #f2c40c;
    --nf-gold-deep: #cc9e14;
    --nf-royal: #6f42c1;
    --nf-teal: #14998e;
    --nf-burnt: #c2410c;
    /* the aurora palette of the suite's home pages: sky blue, cyan and gold */
    --nf-hero-glow-a-rgb: 35, 168, 242;
    --nf-hero-glow-b-rgb: 64, 208, 246;
    --nf-hero-glow-c-rgb: 243, 180, 23;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.navbar-brand,
.nf-title {
    font-family: var(--nf-font-title);
    font-weight: 500;
    letter-spacing: -0.005em;
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 0.01em;
}

.navbar .nav-link {
    font-family: var(--nf-font-title);
    font-size: 1.05rem;
}

    .navbar .nav-link.active {
        color: var(--nf-deep);
    }

[data-bs-theme=dark] .navbar .nav-link.active {
    color: var(--nf-cyan);
}

.btn-nf,
.btn-nf-outline {
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 0.6rem;
    font-family: var(--nf-font-title);
    font-weight: 500;
    font-size: 1.05rem;
}

.btn-nf {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--nf-deep);
    --bs-btn-border-color: var(--nf-deep);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #005a92;
    --bs-btn-hover-border-color: #005a92;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #004c7c;
    --bs-btn-active-border-color: #004c7c;
}

.btn-nf-outline {
    --bs-btn-color: var(--bs-emphasis-color);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-emphasis-color);
    --bs-btn-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.06);
    --bs-btn-hover-border-color: var(--bs-emphasis-color);
    --bs-btn-active-color: var(--bs-emphasis-color);
    --bs-btn-active-border-color: var(--bs-emphasis-color);
}

.nf-display {
    font-family: var(--nf-font-title);
    font-weight: 700;
    font-size: clamp(2.6rem, 5.6vw, 4.75rem);
    line-height: 0.98;
    letter-spacing: -0.02em;
    color: var(--bs-emphasis-color);
    max-width: 13ch;
    margin-bottom: 1.5rem;
}

.nf-lead {
    font-size: 1.2rem;
    line-height: 1.55;
    max-width: 36rem;
    color: var(--bs-secondary-color);
    margin-bottom: 2.25rem;
}

/* ---------------------------------------------------------------------------
   Aurora backdrop - the hero backdrop of the suite's home pages (.nf-hero-bg
   in NFriends.Web.Frontend.Shared), scoped to its section here.
   --------------------------------------------------------------------------- */
.nf-aurora {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

    .nf-aurora i,
    .nf-aurora::before,
    .nf-aurora::after {
        content: "";
        position: absolute;
        display: block;
        width: 70vmax;
        height: 70vmax;
        border-radius: 50%;
    }

    .nf-aurora i {
        width: 40vmax;
        height: 40vmax;
        top: 30%;
        left: 45%;
        background: radial-gradient(circle, rgba(var(--nf-hero-glow-c-rgb), 0.2) 0%, rgba(var(--nf-hero-glow-c-rgb), 0.07) 35%, transparent 68%);
        animation: nf-aurora-pan 44s ease-in-out infinite alternate;
    }

    .nf-aurora::before {
        top: -30vmax;
        left: -22vmax;
        background: radial-gradient(circle, rgba(var(--nf-hero-glow-a-rgb), 0.42) 0%, rgba(var(--nf-hero-glow-a-rgb), 0.16) 40%, transparent 70%);
        animation: nf-aurora-drift-a 26s ease-in-out infinite alternate;
    }

    .nf-aurora::after {
        right: -24vmax;
        bottom: -40vmax;
        background: radial-gradient(circle, rgba(var(--nf-hero-glow-b-rgb), 0.36) 0%, rgba(var(--nf-hero-glow-b-rgb), 0.14) 40%, transparent 70%);
        animation: nf-aurora-drift-b 34s ease-in-out infinite alternate;
    }

@keyframes nf-aurora-pan {
    to { transform: translate(-14vmax, 6vmax) scale(1.15); }
}

@keyframes nf-aurora-drift-a {
    to { transform: translate(18vmax, 10vmax) scale(1.2); }
}

@keyframes nf-aurora-drift-b {
    to { transform: translate(-16vmax, -8vmax) scale(1.15); }
}

/* ---------------------------------------------------------------------------
   Home
   --------------------------------------------------------------------------- */
.nf-home-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 3.5rem 0 4rem;
    border-bottom: 1px solid var(--bs-border-color);
}

@media (min-width: 992px) {
    .nf-home-hero {
        min-height: min(calc(100vh - 7rem), 52rem);
        display: flex;
        align-items: center;
        padding: 4rem 0;
    }
}

/* The wordmark wears the brand gradient, so the backdrop keeps away from it: the blue glow
   lights the signpost instead, and the aurora fades out over the wordmark's column (above it
   on small screens) so the mark always sits on the plain page background. */
.nf-home-hero .nf-aurora {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 12rem, #000 22rem);
    mask-image: linear-gradient(to bottom, transparent 0, transparent 12rem, #000 22rem);
}

@media (min-width: 992px) {
    .nf-home-hero .nf-aurora {
        -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 30%, #000 58%);
        mask-image: linear-gradient(to right, transparent 0, transparent 30%, #000 58%);
    }
}

    .nf-home-hero .nf-aurora::before {
        left: auto;
        right: -26vmax;
        top: -34vmax;
        animation-name: nf-aurora-drift-a-home;
    }

@keyframes nf-aurora-drift-a-home {
    to { transform: translate(-10vmax, 14vmax) scale(1.15); }
}

.nf-wordmark {
    display: block;
    width: 100%;
    max-width: 24rem;
    height: auto;
    margin-bottom: 2.5rem;
}

/* ---------------------------------------------------------------------------
   Signpost: the products signed the way Swiss hiking trails are - flat arrows
   in each product's colour on a pole striped like the scrollbar thumb, the Swiss flag mounted below them on
   the other side. Proportions follow the trail sign: the arrows and the flag keep
   one pole width off the pole, the tip is 0.4 of a sign's height, the flag 1.36 of it.
   --------------------------------------------------------------------------- */
:root {
    --nf-trail: #fbc200;
    --nf-teal-deep: #0e7c73;
    --nf-swiss-red: #f2000c;
}

/* Each product signs in its own colour - on its arrow and on the link of its section.
   The text colours keep at least 4.5:1 against the sign. */
.nf-sign,
.nf-trail-link {
    --sign-bg: var(--nf-trail);
    --sign-fg: #000;
}

.nf-sign.rfs,
.nf-product.rfs .nf-trail-link {
    --sign-bg: var(--nf-trail);
    --sign-fg: #000;
}

.nf-sign.securiam,
.nf-product.securiam .nf-trail-link {
    --sign-bg: var(--nf-royal);
    --sign-fg: #fff;
}

.nf-sign.sway,
.nf-product.sway .nf-trail-link {
    --sign-bg: var(--nf-teal-deep);
    --sign-fg: #fff;
}

.nf-sign.punchcard,
.nf-product.punchcard .nf-trail-link {
    --sign-bg: var(--nf-burnt);
    --sign-fg: #fff;
}

.nf-signpost {
    --sh: 4.4rem;
    --pole: 1rem;
    --flag: 6rem;
    display: grid;
    grid-template-columns: var(--flag) var(--pole) var(--pole) var(--pole) minmax(0, 1fr);
    grid-template-rows: calc(var(--sh) * 0.25) auto calc(var(--sh) * 0.45) auto calc(var(--sh) * 0.9);
    max-width: 32rem;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .nf-signpost {
        --flag: 4.5rem;
    }
}

@media (max-width: 575.98px) {
    .nf-signpost {
        --sh: 3.8rem;
        --pole: 0.75rem;
        --flag: 4.5rem;
    }
}

.nf-signpost-pole {
    grid-column: 3;
    grid-row: 1 / -1;
    /* Striped like the scrollbar thumb (site.css): NFriends blue under a 20% ink stripe. */
    background-color: var(--bs-primary);
    /* Over the stripes, a light from the left rounds the pole. */
    background-image: linear-gradient(to right, rgba(255, 255, 255, .22), transparent 45%, rgba(0, 0, 0, .28)), repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(var(--bs-emphasis-color-rgb), .2) 10px, rgba(var(--bs-emphasis-color-rgb), .2) 20px);
    box-shadow: 0.25rem 0 0.6rem rgba(0, 0, 0, .18);
    /* A half-circle cap: the radius is half the pole's width. */
    border-radius: calc(var(--pole) / 2) calc(var(--pole) / 2) 0 0;
}

.nf-signpost-signs {
    grid-column: 5;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: calc(var(--sh) * 0.12);
    margin: 0;
    padding: 0;
    list-style: none;
}

    /* the drop shadow sits on the list item so the sign's clip-path does not cut it off */
    .nf-signpost-signs > li {
        filter: drop-shadow(0 0.3rem 0.45rem rgba(0, 0, 0, .22));
    }

/* Signs on both sides of the pole: the list takes the signpost's columns, and a
   sign marked .left mounts to the left of the pole in the row of the sign that
   follows it. On phones there is no room for two, so every sign points right. */
@media (min-width: 576px) {
    .nf-signpost.two-way {
        grid-template-columns: minmax(0, 1fr) var(--pole) var(--pole) var(--pole) minmax(0, 1fr);
        max-width: 46rem;
    }

        .nf-signpost.two-way .nf-signpost-signs {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: subgrid;
            row-gap: calc(var(--sh) * 0.12);
        }

            .nf-signpost.two-way .nf-signpost-signs > li {
                grid-column: 5;
                display: flex;
            }

                .nf-signpost.two-way .nf-signpost-signs > li > a {
                    flex: 1 1 auto;
                }

            .nf-signpost.two-way .nf-signpost-signs > li.left {
                grid-column: 1;
            }

        .nf-signpost.two-way .nf-signpost-flag {
            justify-self: end;
        }

    .nf-sign.left {
        flex-direction: row-reverse;
        padding: 0.5rem 0.6rem 0.5rem calc(var(--tip) + 0.75rem);
        text-align: end;
        clip-path: polygon(var(--tip) 0, 100% 0, 100% 100%, var(--tip) 100%, 0 50%);
    }

        .nf-sign.left:hover,
        .nf-sign.left:focus-visible {
            transform: translateX(-0.4rem);
        }
}

.nf-signpost-flag {
    grid-column: 1;
    grid-row: 4;
    display: block;
    width: var(--flag);
    height: var(--flag);
}

    .nf-signpost-flag rect {
        fill: var(--nf-swiss-red);
    }

.nf-signpost-caption {
    grid-column: 5;
    grid-row: 4;
    align-self: center;
    margin: 0;
    font-family: var(--nf-font-title);
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1.1;
    color: var(--bs-emphasis-color);
}

.nf-sign {
    --tip: calc(var(--sh) * 0.4);
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: var(--sh);
    padding: 0.5rem calc(var(--tip) + 0.75rem) 0.5rem 0.6rem;
    color: var(--sign-fg);
    /* The product colour lit from above: lighter along the top edge, darker towards the bottom. */
    background: linear-gradient(to bottom, rgba(255, 255, 255, .2), transparent 40%, rgba(0, 0, 0, .2)) var(--sign-bg);
    text-decoration: none;
    clip-path: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%);
    transition: transform 0.25s ease, filter 0.25s ease;
}

    .nf-sign:hover,
    .nf-sign:focus-visible {
        color: var(--sign-fg);
        filter: brightness(1.1);
        transform: translateX(0.4rem);
    }

    .nf-sign:focus-visible {
        outline: none;
    }

        .nf-sign:focus-visible .nf-sign-name {
            text-decoration: underline;
            text-decoration-thickness: 2px;
            text-underline-offset: 3px;
        }

/* the pictogram plate, as trail signs carry the bus or train symbol of a stop */
.nf-sign-logo {
    flex: 0 0 auto;
    width: calc(var(--sh) - 1.2rem);
    height: calc(var(--sh) - 1.2rem);
    padding: 0.3rem;
    background: #fff;
}

    .nf-sign-logo img {
        display: block;
        width: 100%;
        height: 100%;
    }

.nf-sign-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-family: var(--nf-font-title);
    line-height: 1.1;
}

.nf-sign-name {
    font-weight: 700;
    font-size: 1.35rem;
}

.nf-sign-host {
    font-size: 1rem;
}

@media (max-width: 575.98px) {
    .nf-sign {
        gap: 0.65rem;
    }

    .nf-sign-name {
        font-size: 1.15rem;
    }

    .nf-sign-host {
        font-size: 0.9rem;
    }

    .nf-signpost-caption {
        font-size: 1.15rem;
    }
}

/* A single trail arrow as the way to a product's own site. */
.nf-trail-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 2rem 0.6rem 1rem;
    font-family: var(--nf-font-title);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--sign-fg);
    background: var(--sign-bg);
    text-decoration: none;
    clip-path: polygon(0 0, calc(100% - 1.1rem) 0, 100% 50%, calc(100% - 1.1rem) 100%, 0 100%);
    transition: filter 0.25s ease;
}

    .nf-trail-link:hover,
    .nf-trail-link:focus-visible {
        color: var(--sign-fg);
        filter: brightness(1.1);
    }

    .nf-trail-link:focus-visible {
        outline: none;
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 3px;
    }

    .nf-trail-link svg {
        width: 0.95rem;
        height: 0.95rem;
    }

@media (prefers-reduced-motion: no-preference) {
    .nf-hero-intro > * {
        animation: nf-rise 0.7s cubic-bezier(.2, .7, .2, 1) both;
    }

        .nf-hero-intro > :nth-child(2) { animation-delay: 0.08s; }
        .nf-hero-intro > :nth-child(3) { animation-delay: 0.16s; }
        .nf-hero-intro > :nth-child(4) { animation-delay: 0.24s; }

    .nf-signpost-signs > li > a {
        animation: nf-mount 0.6s cubic-bezier(.2, .8, .25, 1.15) both;
        transform-origin: left center;
    }

        .nf-signpost-signs > li:nth-child(1) > a { animation-delay: 0.45s; }
        .nf-signpost-signs > li:nth-child(2) > a { animation-delay: 0.57s; }
        .nf-signpost-signs > li:nth-child(3) > a { animation-delay: 0.69s; }
        .nf-signpost-signs > li:nth-child(4) > a { animation-delay: 0.81s; }
        .nf-signpost-signs > li:nth-child(5) > a { animation-delay: 0.93s; }
        .nf-signpost-signs > li:nth-child(6) > a { animation-delay: 1.05s; }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 576px) {
    .nf-signpost-signs > li > a.left {
        animation-name: nf-mount-left;
        transform-origin: right center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nf-aurora i,
    .nf-aurora::before,
    .nf-aurora::after {
        animation: none;
    }

    .nf-sign,
    .nf-trail-link {
        transition: none;
    }
}

@keyframes nf-rise {
    from { opacity: 0; transform: translateY(0.75rem); }
}

@keyframes nf-mount {
    from { opacity: 0; transform: translateX(-2rem); }
}

@keyframes nf-mount-left {
    from { opacity: 0; transform: translateX(2rem); }
}

/* Story: two points in time, joined by the years between them. */
.nf-story {
    padding: 5rem 0;
}

.nf-story-title {
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    margin-bottom: 3rem;
    max-width: 24ch;
}

.nf-era {
    position: relative;
    height: 100%;
    padding-top: 1.75rem;
    border-top: 4px solid var(--bs-border-color);
}

    .nf-era.now {
        border-top-color: var(--nf-sky);
    }

    .nf-era::before {
        content: "";
        position: absolute;
        top: -0.65rem;
        left: 0;
        width: 1.05rem;
        height: 1.05rem;
        border-radius: 50%;
        background: var(--bs-body-bg);
        border: 4px solid var(--bs-border-color);
    }

    .nf-era.now::before {
        border-color: var(--nf-sky);
        background: var(--nf-sky);
    }

.nf-era-year {
    font-family: var(--nf-font-title);
    font-weight: 300;
    font-size: clamp(3rem, 6vw, 4.5rem);
    line-height: 1;
    color: var(--bs-secondary-color);
    margin-bottom: 1rem;
}

.nf-era.now .nf-era-year {
    font-weight: 700;
    color: var(--nf-deep);
}

[data-bs-theme=dark] .nf-era.now .nf-era-year {
    color: var(--nf-cyan);
}

.nf-era p {
    font-size: 1.1rem;
    max-width: 32rem;
}

/* Documentation band, on the navigation bar's diagonal stripes. */
.nf-band {
    padding: 3.5rem 0;
    background: repeating-linear-gradient(45deg, transparent, transparent 12px, var(--nf-grayscale-83) 12px, var(--nf-grayscale-83) 24px), var(--nf-grayscale-89);
}

.nf-band-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2rem 2.25rem;
    background: var(--bs-body-bg);
    border-radius: 0.5rem;
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.12);
}

    .nf-band-panel h2 {
        font-size: 1.75rem;
        margin-bottom: 0.35rem;
    }

    .nf-band-panel p {
        margin: 0;
        color: var(--bs-secondary-color);
        max-width: 38rem;
    }

/* ---------------------------------------------------------------------------
   Products
   --------------------------------------------------------------------------- */
.nf-products-head {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 4.5rem 0 3.5rem;
}

    .nf-products-head .nf-display {
        max-width: none;
    }

.nf-product {
    --accent: var(--nf-sky);
    --accent-text: var(--nf-deep);
    padding: 4.5rem 0;
    border-top: 1px solid var(--bs-border-color);
    scroll-margin-top: 3rem;
}

    .nf-product.rfs { --accent: var(--nf-trail); --accent-text: #806200; }
    .nf-product.securiam { --accent: var(--nf-royal); --accent-text: var(--nf-royal); }
    .nf-product.sway { --accent: var(--nf-teal); --accent-text: #0b6f67; }
    .nf-product.punchcard { --accent: #ea580c; --accent-text: var(--nf-burnt); }

[data-bs-theme=dark] .nf-product.rfs { --accent-text: #ffd700; }
[data-bs-theme=dark] .nf-product.securiam { --accent-text: #b89cf0; }
[data-bs-theme=dark] .nf-product.sway { --accent-text: #4fd1c5; }
[data-bs-theme=dark] .nf-product.punchcard { --accent-text: #fb923c; }

.nf-product-logo {
    display: block;
    width: 6rem;
    height: 6rem;
    margin-bottom: 1.5rem;
}

.nf-product-name {
    font-weight: 700;
    font-size: clamp(2.2rem, 4vw, 3rem);
    line-height: 1;
    margin-bottom: 0.75rem;
}

    .nf-product-name::after {
        content: "";
        display: block;
        width: 3.5rem;
        height: 0.35rem;
        margin-top: 1rem;
        border-radius: 0.2rem;
        background: var(--accent);
    }

.nf-product-kind {
    font-family: var(--nf-font-title);
    font-size: 1.15rem;
    color: var(--accent-text);
    margin-bottom: 1.75rem;
}

.nf-product-summary {
    font-size: 1.2rem;
    line-height: 1.55;
    max-width: 40rem;
    margin-bottom: 2.25rem;
}

.nf-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem 2.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .nf-features {
        grid-template-columns: 1fr 1fr;
    }
}

.nf-features li {
    padding-left: 1rem;
    border-left: 3px solid var(--accent);
}

.nf-features h3,
.nf-features h4 {
    font-size: 1.2rem;
    margin-bottom: 0.3rem;
}

.nf-features p {
    margin: 0;
    color: var(--bs-secondary-color);
}

.nf-part + .nf-part {
    margin-top: 3rem;
}

.nf-part-title {
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
}

.nf-deck {
    margin: 1.75rem 0 0;
}

    .nf-deck img {
        display: block;
        width: 100%;
        height: auto;
        filter: drop-shadow(0 0.75rem 1.25rem rgba(0, 0, 0, 0.2));
    }

.nf-suite-note {
    padding: 4rem 0 5rem;
    border-top: 1px solid var(--bs-border-color);
}

    .nf-suite-note h2 {
        font-size: 1.9rem;
    }

    .nf-suite-note p {
        max-width: 42rem;
        font-size: 1.1rem;
        color: var(--bs-secondary-color);
    }

/* ---------------------------------------------------------------------------
   Me - a personal page on the simple layout: no navigation bar above it, so
   nothing to leave room for.
   --------------------------------------------------------------------------- */
body.nf-simple {
    padding-top: 0;
}

.fm-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 2rem 0 4.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.fm-home {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 3rem;
    font-family: var(--nf-font-title);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--bs-emphasis-color);
    text-decoration: none;
}

    .fm-home:hover,
    .fm-home:focus-visible {
        color: var(--nf-deep);
    }

[data-bs-theme=dark] .fm-home:hover,
[data-bs-theme=dark] .fm-home:focus-visible {
    color: var(--nf-cyan);
}

/* The portrait in a ring of the brand gradient, as the wordmark wears it. */
.fm-portrait {
    display: block;
    width: 7.5rem;
    height: 7.5rem;
    margin-bottom: 1.75rem;
    padding: 0.3rem;
    border-radius: 50%;
    background: linear-gradient(160deg, var(--nf-cyan), var(--nf-sky) 55%, var(--nf-deep));
    box-shadow: 0 0.75rem 2rem rgba(0, 109, 176, 0.25);
    object-fit: cover;
}

.fm-hero .nf-display {
    max-width: none;
    margin-bottom: 0.75rem;
}

.fm-role {
    font-family: var(--nf-font-title);
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    color: var(--nf-deep);
    margin-bottom: 1.5rem;
}

[data-bs-theme=dark] .fm-role {
    color: var(--nf-cyan);
}

/* Three figures, read like the years on the home page's timeline. */
.fm-facts {
    display: grid;
    gap: 1.75rem;
    margin: 0;
    max-width: 26rem;
}

    .fm-facts > div {
        padding-left: 1.25rem;
        border-left: 4px solid var(--nf-sky);
    }

    .fm-facts dt {
        font-family: var(--nf-font-title);
        font-weight: 300;
        font-size: clamp(2.6rem, 4.5vw, 3.5rem);
        line-height: 1;
        color: var(--bs-emphasis-color);
    }

    .fm-facts dd {
        margin: 0.35rem 0 0;
        color: var(--bs-secondary-color);
    }

.fm-section {
    padding: 4.5rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.fm-section-title {
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    margin-bottom: 2.25rem;
}

.fm-principles {
    --accent: var(--nf-sky);
}

@media (min-width: 992px) {
    .fm-principles {
        grid-template-columns: repeat(4, 1fr);
    }
}

.fm-stack-title {
    font-size: 1.2rem;
    color: var(--bs-secondary-color);
    margin-bottom: 1rem;
}

.fm-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .fm-stack li {
        padding: 0.4rem 0.85rem;
        font-family: var(--nf-font-title);
        font-size: 1.05rem;
        color: var(--bs-emphasis-color);
        background: rgba(var(--bs-primary-rgb), 0.1);
        border: 1px solid rgba(var(--bs-primary-rgb), 0.35);
        border-radius: 0.25rem;
    }

    .fm-stack small {
        color: var(--bs-secondary-color);
        margin-left: 0.2rem;
    }

    .fm-stack.quiet li {
        background: transparent;
        border-color: var(--bs-border-color);
    }

/* A chapter opens on the navigation bar's diagonal stripes. */
.fm-chapter {
    padding: 3rem 0 2.5rem;
    background: repeating-linear-gradient(45deg, transparent, transparent 12px, var(--nf-grayscale-83) 12px, var(--nf-grayscale-83) 24px), var(--nf-grayscale-89);
}

    .fm-chapter h2 {
        font-weight: 700;
        font-size: clamp(2rem, 4vw, 2.8rem);
        margin-bottom: 0.5rem;
    }

    .fm-chapter p {
        max-width: 42rem;
        margin: 0;
        font-size: 1.1rem;
    }

    .fm-chapter .fm-chapter-kicker {
        font-family: var(--nf-font-title);
        font-weight: 500;
        font-size: 0.95rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--bs-secondary-color);
        margin-bottom: 0.35rem;
    }

    .fm-chapter + .nf-product {
        border-top: 0;
    }

/* Each project in its own colour; JunctionDeck in the orange of its mark. */
.nf-product.junctiondeck { --accent: #ff7a00; --accent-text: #c83737; }
.nf-product.melodi { --accent: var(--nf-sky); --accent-text: var(--nf-deep); }
.nf-product.fairaly { --accent: var(--nf-teal); --accent-text: #0b6f67; }

[data-bs-theme=dark] .nf-product.junctiondeck { --accent-text: #ffaa00; }
[data-bs-theme=dark] .nf-product.melodi { --accent-text: var(--nf-cyan); }
[data-bs-theme=dark] .nf-product.fairaly { --accent-text: #4fd1c5; }

.fm-meta {
    font-size: 0.95rem;
    color: var(--bs-secondary-color);
    margin: -1rem 0 1.75rem;
}

/* The recordings, framed in the stripes with the project's colour along the top. */
.fm-reel {
    display: grid;
    gap: 1rem;
    margin-top: 3rem;
    padding: 1rem;
    border-top: 0.35rem solid var(--accent);
    border-radius: 0.5rem;
    background: repeating-linear-gradient(45deg, transparent, transparent 12px, var(--nf-grayscale-83) 12px, var(--nf-grayscale-83) 24px), var(--nf-grayscale-89);
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.12);
}

@media (min-width: 768px) {
    .fm-reel {
        padding: 1.5rem;
    }
}

    .fm-reel video {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 0.25rem;
        background: var(--bs-body-bg);
        box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.18);
    }

.fm-reel-still {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 3.5rem 1rem;
    border-radius: 0.25rem;
    background: var(--bs-body-bg);
    box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.18);
}

    .fm-reel-still img {
        width: clamp(4rem, 12vw, 7rem);
        height: auto;
    }

    .fm-reel-still span {
        font-family: var(--nf-font-title);
        font-weight: 700;
        font-size: clamp(1.4rem, 3vw, 2rem);
        color: var(--bs-emphasis-color);
    }

.fm-footer {
    margin-top: 1rem;
}