/* ==========================================================================
   Fonts (self-hosted, latin + latin-ext; see assets/fonts/OFL.txt)
   ========================================================================== */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    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;
}

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
    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;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
    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;
}

/* ==========================================================================
   Design tokens
   ========================================================================== */

:root {
    --color-background: #F7F8FA;
    --color-header: rgba(247, 248, 250, .88);
    --color-surface: #FFFFFF;
    --color-surface-muted: #EEF0F3;
    --color-placeholder-strong: #E5E8EC;
    --color-hover: #EEF0F3;
    --color-hover-strong: #E3E8EF;
    --color-border: #E5E8EC;
    --color-border-hover: #C9D0D8;
    --color-border-card-hover: #D3D9E0;
    --color-text: #25282C;
    --color-text-prose: #2F3338;
    --color-text-secondary: #4A4F57;
    --color-text-muted: #707780;
    --color-accent: #4F79A6;
    --color-accent-hover: #41698F;
    --color-link: #3F6A97;
    --color-accent-soft: #EAF0F7;
    --color-selection: rgba(79, 121, 166, .24);
    --color-icon: #648DB8;
    --color-chip-active: #25282C;
    --color-chip-active-text: #FFFFFF;
    --color-segment: #EEF0F3;
    --color-segment-active: #FFFFFF;
    --shadow-segment-active: 0 1px 2px rgba(37, 40, 44, .14);
    --shadow-soft: 0 1px 2px rgba(37, 40, 44, .04);
    --shadow-button: 0 1px 2px rgba(37, 40, 44, .12);
    --shadow-card-hover: 0 10px 30px -18px rgba(37, 40, 44, .25);
    --placeholder-inset: inset 0 0 0 1px rgba(37, 40, 44, .06);
    --logo-filter: grayscale(1);
    --logo-filter-hover: none;

    /* Dark "inverse" panels look the same in both themes. */
    --color-inverse: #25282C;
    --color-inverse-text: #F7F8FA;
    --color-inverse-text-muted: rgba(247, 248, 250, .75);
    --color-inverse-accent: #9DBBDB;
    --color-inverse-selection: rgba(157, 187, 219, .35);
    --color-inverse-border: rgba(255, 255, 255, .1);
    --shadow-inverse: none;
    --color-button-light: #FFFFFF;
    --color-button-light-hover: #E9EEF4;
    --color-button-light-text: #25282C;

    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-heading: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    /* Line heights: headings tight, UI snug, running text airy. */
    --leading-display: 1.05;
    --leading-heading: 1.2;
    --leading-snug: 1.35;
    --leading-body: 1.55;
    --leading-prose: 1.65;
    --container-width: 1120px;
    --container-narrow-width: 720px;
    --gutter: clamp(16px, 4vw, 32px);
    --section-padding: clamp(56px, 7vw, 88px);

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-background: #17191C;
        --color-header: rgba(23, 25, 28, .86);
        --color-surface: #1F2226;
        --color-surface-muted: #26292E;
        --color-placeholder-strong: #26292E;
        --color-hover: rgba(255, 255, 255, .06);
        --color-hover-strong: #303439;
        --color-border: rgba(255, 255, 255, .08);
        --color-border-hover: rgba(255, 255, 255, .2);
        --color-border-card-hover: rgba(255, 255, 255, .16);
        --color-text: #E6E8EB;
        --color-text-prose: #C9CDD3;
        --color-text-secondary: #C3C8CE;
        --color-text-muted: #9AA1AA;
        --color-accent: #5C86B3;
        --color-accent-hover: #6B93BE;
        --color-link: #8FB2D9;
        --color-accent-soft: rgba(100, 141, 184, .18);
        --color-selection: rgba(143, 178, 217, .32);
        --color-chip-active: #E6E8EB;
        --color-chip-active-text: #17191C;
        --color-segment: #26292E;
        --color-segment-active: #3A3E45;
        --shadow-segment-active: none;
        --shadow-soft: none;
        --shadow-button: none;
        --shadow-card-hover: none;
        --placeholder-inset: inset 0 0 0 1px rgba(255, 255, 255, .06);
        --logo-filter: brightness(0) invert(1);
        --logo-filter-hover: brightness(0) invert(1);
        --color-inverse: #22252A;
        --shadow-inverse: inset 0 0 0 1px rgba(255, 255, 255, .07);
        --color-button-light: #E6E8EB;
        --color-button-light-hover: #FFFFFF;
        --color-button-light-text: #17191C;

        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --color-background: #17191C;
    --color-header: rgba(23, 25, 28, .86);
    --color-surface: #1F2226;
    --color-surface-muted: #26292E;
    --color-placeholder-strong: #26292E;
    --color-hover: rgba(255, 255, 255, .06);
    --color-hover-strong: #303439;
    --color-border: rgba(255, 255, 255, .08);
    --color-border-hover: rgba(255, 255, 255, .2);
    --color-border-card-hover: rgba(255, 255, 255, .16);
    --color-text: #E6E8EB;
    --color-text-prose: #C9CDD3;
    --color-text-secondary: #C3C8CE;
    --color-text-muted: #9AA1AA;
    --color-accent: #5C86B3;
    --color-accent-hover: #6B93BE;
    --color-link: #8FB2D9;
    --color-accent-soft: rgba(100, 141, 184, .18);
    --color-selection: rgba(143, 178, 217, .32);
    --color-chip-active: #E6E8EB;
    --color-chip-active-text: #17191C;
    --color-segment: #26292E;
    --color-segment-active: #3A3E45;
    --shadow-segment-active: none;
    --shadow-soft: none;
    --shadow-button: none;
    --shadow-card-hover: none;
    --placeholder-inset: inset 0 0 0 1px rgba(255, 255, 255, .06);
    --logo-filter: brightness(0) invert(1);
    --logo-filter-hover: brightness(0) invert(1);
    --color-inverse: #22252A;
    --shadow-inverse: inset 0 0 0 1px rgba(255, 255, 255, .07);
    --color-button-light: #E6E8EB;
    --color-button-light-hover: #FFFFFF;
    --color-button-light-text: #17191C;

    color-scheme: dark;
}

/* ==========================================================================
   Occasions (seasons and holidays)
   data-occasion on <html> is set by the server from the date (src/OccasionCalendar.php).
   Each occasion only defines --occasion-* values; the mapping blocks below
   swap them into the regular tokens for the light and dark theme.
   ========================================================================== */
:root[data-occasion="spring"] {
    --occasion-emoji: "🌱";
    --occasion-accent: #468357;
    --occasion-accent-hover: #3D774E;
    --occasion-link: #3A7449;
    --occasion-accent-soft: #EAF4EC;
    --occasion-selection: rgba(74, 138, 92, .24);
    --occasion-icon-color: #5E9C70;
    --occasion-accent-dark: #4C8F62;
    --occasion-accent-hover-dark: #5FA374;
    --occasion-link-dark: #8CC79D;
    --occasion-accent-soft-dark: rgba(95, 163, 116, .18);
    --occasion-selection-dark: rgba(140, 199, 157, .32);
    --occasion-inverse-accent: #A3D4B0;
    --occasion-inverse-selection: rgba(163, 212, 176, .35);
}
:root[data-occasion="summer"] {
    --occasion-emoji: "☀️";
    --occasion-accent: #2C8186;
    --occasion-accent-hover: #267479;
    --occasion-link: #237277;
    --occasion-accent-soft: #E5F3F4;
    --occasion-selection: rgba(47, 138, 143, .24);
    --occasion-icon-color: #45A0A5;
    --occasion-accent-dark: #338F93;
    --occasion-accent-hover-dark: #45A5AA;
    --occasion-link-dark: #84CBCE;
    --occasion-accent-soft-dark: rgba(69, 165, 170, .18);
    --occasion-selection-dark: rgba(132, 203, 206, .32);
    --occasion-inverse-accent: #9AD6D8;
    --occasion-inverse-selection: rgba(154, 214, 216, .35);
}
:root[data-occasion="autumn"] {
    --occasion-emoji: "🍂";
    --occasion-accent: #AE622D;
    --occasion-accent-hover: #985426;
    --occasion-link: #9A5224;
    --occasion-accent-soft: #F8EDE4;
    --occasion-selection: rgba(176, 99, 46, .24);
    --occasion-icon-color: #C27A45;
    --occasion-accent-dark: #BA6E38;
    --occasion-accent-hover-dark: #C77E48;
    --occasion-link-dark: #E3A97C;
    --occasion-accent-soft-dark: rgba(199, 126, 72, .18);
    --occasion-selection-dark: rgba(227, 169, 124, .32);
    --occasion-inverse-accent: #EBB892;
    --occasion-inverse-selection: rgba(235, 184, 146, .35);
}
:root[data-occasion="winter"] {
    --occasion-emoji: "❄️";
    --occasion-accent: #5A6FB0;
    --occasion-accent-hover: #4B5E99;
    --occasion-link: #4A5C98;
    --occasion-accent-soft: #ECEFF8;
    --occasion-selection: rgba(90, 111, 176, .24);
    --occasion-icon-color: #7083BF;
    --occasion-accent-dark: #6478B8;
    --occasion-accent-hover-dark: #7487C3;
    --occasion-link-dark: #A3B2E0;
    --occasion-accent-soft-dark: rgba(116, 135, 195, .18);
    --occasion-selection-dark: rgba(163, 178, 224, .32);
    --occasion-inverse-accent: #B3C0E6;
    --occasion-inverse-selection: rgba(179, 192, 230, .35);
}
:root[data-occasion="valentines"] {
    --occasion-emoji: "❤️";
    --occasion-accent: #B8426E;
    --occasion-accent-hover: #9E375D;
    --occasion-link: #A23A61;
    --occasion-accent-soft: #F9E9EF;
    --occasion-selection: rgba(184, 66, 110, .24);
    --occasion-icon-color: #C95F87;
    --occasion-accent-dark: #C24D78;
    --occasion-accent-hover-dark: #CE5F88;
    --occasion-link-dark: #EF9DBB;
    --occasion-accent-soft-dark: rgba(206, 95, 136, .18);
    --occasion-selection-dark: rgba(239, 157, 187, .32);
    --occasion-inverse-accent: #F3AEC7;
    --occasion-inverse-selection: rgba(243, 174, 199, .35);
}
:root[data-occasion="easter"] {
    --occasion-emoji: "🐣";
    --occasion-accent: #7A5BB0;
    --occasion-accent-hover: #684C99;
    --occasion-link: #6A4D9A;
    --occasion-accent-soft: #F1ECF8;
    --occasion-selection: rgba(122, 91, 176, .24);
    --occasion-icon-color: #8E73BF;
    --occasion-accent-dark: #8466BA;
    --occasion-accent-hover-dark: #9377C5;
    --occasion-link-dark: #C2ADE6;
    --occasion-accent-soft-dark: rgba(147, 119, 197, .18);
    --occasion-selection-dark: rgba(194, 173, 230, .32);
    --occasion-inverse-accent: #CDBCEC;
    --occasion-inverse-selection: rgba(205, 188, 236, .35);
}
:root[data-occasion="halloween"] {
    --occasion-emoji: "🎃";
    --occasion-accent: #BC5B13;
    --occasion-accent-hover: #A64F10;
    --occasion-link: #A8500F;
    --occasion-accent-soft: #FBEDE2;
    --occasion-selection: rgba(194, 94, 20, .24);
    --occasion-icon-color: #D7782F;
    --occasion-accent-dark: #C9681E;
    --occasion-accent-hover-dark: #D97A2E;
    --occasion-link-dark: #F5AE72;
    --occasion-accent-soft-dark: rgba(217, 122, 46, .18);
    --occasion-selection-dark: rgba(245, 174, 114, .32);
    --occasion-inverse-accent: #F7BC88;
    --occasion-inverse-selection: rgba(247, 188, 136, .35);
}
:root[data-occasion="christmas"] {
    --occasion-emoji: "🎄";
    --occasion-accent: #B23A3A;
    --occasion-accent-hover: #982F2F;
    --occasion-link: #9C3232;
    --occasion-accent-soft: #F8E9E9;
    --occasion-selection: rgba(178, 58, 58, .24);
    --occasion-icon-color: #C45555;
    --occasion-accent-dark: #BE4646;
    --occasion-accent-hover-dark: #CB5858;
    --occasion-link-dark: #EE9A9A;
    --occasion-accent-soft-dark: rgba(203, 88, 88, .18);
    --occasion-selection-dark: rgba(238, 154, 154, .32);
    --occasion-inverse-accent: #F2AAAA;
    --occasion-inverse-selection: rgba(242, 170, 170, .35);
}
:root[data-occasion="new-year"] {
    --occasion-emoji: "🎆";
    --occasion-accent: #957013;
    --occasion-accent-hover: #82610F;
    --occasion-link: #866410;
    --occasion-accent-soft: #F7F1E1;
    --occasion-selection: rgba(154, 116, 20, .24);
    --occasion-icon-color: #B58C28;
    --occasion-accent-dark: #A17C1E;
    --occasion-accent-hover-dark: #B8922E;
    --occasion-link-dark: #E3C46E;
    --occasion-accent-soft-dark: rgba(184, 146, 46, .18);
    --occasion-selection-dark: rgba(227, 196, 110, .32);
    --occasion-inverse-accent: #EBCF80;
    --occasion-inverse-selection: rgba(235, 207, 128, .35);
}
:root[data-occasion] {
    --color-accent: var(--occasion-accent);
    --color-accent-hover: var(--occasion-accent-hover);
    --color-link: var(--occasion-link);
    --color-accent-soft: var(--occasion-accent-soft);
    --color-selection: var(--occasion-selection);
    --color-icon: var(--occasion-icon-color);
    --color-inverse-accent: var(--occasion-inverse-accent);
    --color-inverse-selection: var(--occasion-inverse-selection);
}

@media (prefers-color-scheme: dark) {
    :root[data-occasion]:not([data-theme="light"]) {
        --color-accent: var(--occasion-accent-dark);
        --color-accent-hover: var(--occasion-accent-hover-dark);
        --color-link: var(--occasion-link-dark);
        --color-accent-soft: var(--occasion-accent-soft-dark);
        --color-selection: var(--occasion-selection-dark);
    }
}

:root[data-occasion][data-theme="dark"] {
    --color-accent: var(--occasion-accent-dark);
    --color-accent-hover: var(--occasion-accent-hover-dark);
    --color-link: var(--occasion-link-dark);
    --color-accent-soft: var(--occasion-accent-soft-dark);
    --color-selection: var(--occasion-selection-dark);
}

/* ==========================================================================
   Base
   ========================================================================== */

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

::selection {
    background: var(--color-selection);
    color: var(--color-text);
}

.inverse-panel ::selection,
.language-suggestion ::selection {
    background: var(--color-inverse-selection);
    color: var(--color-inverse-text);
}

html {
    -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    margin: 0;
    background: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

h1, h2, h3, p, ul, ol, dl, dd, figure {
    margin: 0;
}

img {
    max-width: 100%;
    height: auto;
}

:focus-visible {
    outline: 2px solid var(--color-icon);
    outline-offset: 3px;
    border-radius: 6px;
}

[hidden] {
    display: none !important;
}

h1,
h2,
h3,
.featured-post__title {
    font-family: var(--font-heading);
}

.mono {
    font-family: var(--font-mono);
}

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

h1,
h2,
h3 {
    text-wrap: balance;
}

p,
li,
dd {
    text-wrap: pretty;
}

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

.text-muted {
    color: var(--color-text-muted);
}

.small-note {
    font-size: 14px;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.small-mono {
    font-size: 13px;
}

.body-text {
    font-size: 16px;
    color: var(--color-text-secondary);
}

.icon {
    flex: none;
    width: 18px;
    height: 18px;
}

.icon--18 { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   View transitions
   ========================================================================== */

/* Page-to-page: the header stays in place, the rest fades and slides. */
@view-transition {
    navigation: auto;
}

.site-header {
    view-transition-name: site-header;
}

::view-transition-old(root) {
    animation: page-leave .18s cubic-bezier(.4, 0, 1, 1) both;
}

::view-transition-new(root) {
    animation: page-enter .32s cubic-bezier(0, 0, .2, 1) .06s both;
}

@keyframes page-leave {
    to { opacity: 0; transform: translateY(-8px); }
}

@keyframes page-enter {
    from { opacity: 0; transform: translateY(12px); }
}

/* Theme switch: the whole page (header included) is revealed by a circle
   animated from JS, so default animations and transitions are disabled. */
:root.is-theme-transition .site-header {
    view-transition-name: none;
}

:root.is-theme-transition::view-transition-old(root),
:root.is-theme-transition::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

:root.is-theme-transition *,
:root.is-theme-transition *::before,
:root.is-theme-transition *::after {
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }

    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

/* ==========================================================================
   Layout
   ========================================================================== */

.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.container--narrow {
    max-width: var(--container-narrow-width);
}

.section {
    padding: var(--section-padding) 0;
}

.section--bordered {
    border-top: 1px solid var(--color-border);
}

.section--apps {
    padding-top: clamp(64px, 8vw, 104px);
}

.section__stack {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.section__stack--small { gap: 16px; }
.section__stack--medium { gap: 28px; }
.section__stack--large { gap: 40px; }

.section__heading-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 28px;
}

.section__intro {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 600px;
}

.section-title {
    font-size: clamp(26px, 2.8vw, 32px);
    line-height: 1.15;
    letter-spacing: -.02em;
    font-weight: 700;
}

.section-title--medium {
    font-size: 24px;
    letter-spacing: -.015em;
    line-height: var(--leading-heading);
}

.section-title--small {
    font-size: 22px;
    letter-spacing: -.015em;
    line-height: var(--leading-heading);
}

.section-title--list {
    margin-bottom: 10px;
}

.page-section {
    padding-top: clamp(48px, 7vw, 88px);
    padding-bottom: clamp(56px, 7vw, 96px);
}

.page-bottom-space {
    padding-bottom: clamp(56px, 7vw, 88px);
}

.text-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.text-stack--large {
    gap: 16px;
}

.two-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 64px;
    padding-top: clamp(56px, 7vw, 88px);
}

.two-columns__narrow {
    flex: 1 1 380px;
    min-width: 0;
}

.two-columns__wide {
    flex: 1 1 420px;
    min-width: 0;
}

.more-link {
    padding-top: 20px;
}

.empty-state {
    color: var(--color-text-muted);
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--color-header);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--color-border);
}

.site-header__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 20px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.brand {
    --brand-height: 20px;

    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
}

.brand__logo {
    width: auto;
    height: var(--brand-height);
    aspect-ratio: 74 / 32;
}

.brand__logo path {
    transition: color .3s;
}

/* On hover the four strokes of the mark take the accent colour one after another. */
.brand:hover .brand__logo path,
.brand:focus-visible .brand__logo path {
    color: var(--color-accent);
}

.brand__logo path:nth-child(2) { transition-delay: 60ms; }
.brand__logo path:nth-child(3) { transition-delay: 120ms; }
.brand__logo path:nth-child(4) { transition-delay: 180ms; }

/* First and last name stacked, together as tall as the logo mark. */
.brand__name {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: var(--brand-height);
    font-size: calc(var(--brand-height) * .475);
    font-weight: 600;
    line-height: 1;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* Trim to cap height so the letters align with the top and bottom of the mark. */
.brand__name > span {
    text-box: trim-both cap alphabetic;
}

.main-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
}

.main-nav__link {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-secondary);
    transition: background .15s, color .15s;
    line-height: 1;
}

.main-nav__link:hover {
    color: var(--color-text);
}

.main-nav__link[aria-current] {
    background: var(--color-hover);
    color: var(--color-text);
}

/* Emoji tossed on hover: the stage spans the header height and clips the
   emoji, so it appears from behind the header's bottom edge. */
.nav-emoji-stage {
    position: absolute;
    left: -24px;
    right: -24px;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.nav-emoji {
    position: absolute;
    top: 100%;
    left: 50%;
    font-size: 22px;
    line-height: 1;
    will-change: transform;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.header-actions__divider {
    width: 1px;
    height: 20px;
    margin: 0 6px;
    background: var(--color-border);
}

.icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    border-radius: 8px;
    color: var(--color-text-secondary);
    transition: color .15s, background .15s;
}

.icon-link:hover {
    background: var(--color-hover);
    color: var(--color-text);
}

.icon-link--labelled {
    gap: 8px;
    padding: 0 4px;
    font-size: 15px;
    font-weight: 500;
}

.theme-switch {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    background: var(--color-segment);
}

.no-js .theme-switch {
    display: none;
}

.theme-switch__option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 30px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
}

.theme-switch__option:hover {
    color: var(--color-text);
}

.theme-switch__option:not([aria-pressed="true"]):hover {
    background: var(--color-hover-strong);
}

.theme-switch__option[aria-pressed="true"] {
    background: var(--color-segment-active);
    color: var(--color-text);
    box-shadow: var(--shadow-segment-active);
}

.menu-button {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    transition: background .15s;
}

.menu-button:hover {
    background: var(--color-hover);
}

.menu-button[aria-expanded="true"] .menu-button__open,
.menu-button[aria-expanded="false"] .menu-button__close {
    display: none;
}

.mobile-menu {
    display: flex;
    flex-direction: column;
    padding: 4px 16px 18px;
    border-top: 1px solid var(--color-border);
    background: var(--color-background);
    animation: fade-in .2s ease both;
}

.mobile-menu__link {
    display: flex;
    align-items: center;
    min-height: 52px;
    font-size: 20px;
    font-weight: 600;
    border-bottom: 1px solid var(--color-border);
}

.mobile-menu__link[aria-current] {
    color: var(--color-link);
}

.mobile-menu__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
}

.mobile-menu__links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

/* Five nav items + actions need ~1000px; below that the hamburger menu is used. */
@media (max-width: 1023px) {
    .js .main-nav,
    .js .header-actions {
        display: none;
    }

    .js .menu-button {
        display: inline-flex;
    }
}

@media (max-width: 760px) {
    .site-header__bar {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .brand {
        --brand-height: 18px;

        gap: 9px;
        min-height: 44px;
    }
}

@media (min-width: 1024px) {
    .mobile-menu {
        display: none !important;
    }
}

/* ==========================================================================
   Language suggestion bar (shown by JS above the header)
   ========================================================================== */

.language-suggestion {
    display: grid;
    grid-template-rows: 0fr;
    background: var(--color-inverse);
    color: var(--color-inverse-text);
    transition: grid-template-rows .4s cubic-bezier(.2, .8, .2, 1);
}

.language-suggestion.is-visible {
    grid-template-rows: 1fr;
}

.language-suggestion.is-instant {
    transition: none;
}

.language-suggestion__clip {
    min-height: 0;
    overflow: hidden;
}

.language-suggestion__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 14px;
    line-height: var(--leading-snug);
}

.language-suggestion__icon {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--color-inverse-accent);
}

.language-suggestion__text {
    flex: 1 1 220px;
    min-width: 0;
}

.language-suggestion__dismiss {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--color-inverse-text-muted);
    cursor: pointer;
    transition: background .15s, color .15s;
}

.language-suggestion__dismiss:hover {
    background: rgba(255, 255, 255, .08);
    color: var(--color-inverse-text);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

.site-footer__main {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: 40px 32px;
    padding-top: clamp(48px, 6vw, 64px);
    padding-bottom: clamp(40px, 5vw, 56px);
}

.site-footer__about {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    max-width: 340px;
}

.site-footer__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 600;
}

.site-footer__logo {
    width: auto;
    height: 16px;
    aspect-ratio: 74 / 32;
}

.site-footer__description {
    font-size: 14px;
    line-height: var(--leading-body);
    color: var(--color-text-muted);
}

.site-footer__email {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-link);
}

.site-footer__column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.site-footer__heading {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    line-height: var(--leading-snug);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    line-height: var(--leading-snug);
}

.site-footer .footer-links__link {
    color: var(--color-text-secondary);
}

.site-footer .footer-links__link:hover {
    color: var(--color-text);
}

/* Rolling letters (markup built by assets/js/site.js): each character is a
   two-line drum that rolls up on hover, one after another. */
.roll-text__chars {
    display: inline-flex;
}

.roll-text__char {
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}

.roll-text__inner {
    display: block;
    transition: transform .45s cubic-bezier(.65, 0, .35, 1);
    transition-delay: calc(var(--index) * 18ms);
}

.roll-text__inner::after {
    content: attr(data-char);
    position: absolute;
    top: 100%;
    left: 0;
    color: var(--color-link);
}

a:hover .roll-text__inner,
a:focus-visible .roll-text__inner {
    transform: translateY(-100%);
}

.footer-links__link--icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.language-switch {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    background: var(--color-segment);
}

.language-switch__option {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    color: var(--color-text-muted);
    transition: background .15s, color .15s, box-shadow .15s;
}

.language-switch__option:not([aria-current]):hover {
    background: var(--color-hover-strong);
    color: var(--color-text);
}

.language-switch__option[aria-current] {
    background: var(--color-segment-active);
    color: var(--color-text);
    box-shadow: var(--shadow-segment-active);
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 24px;
    padding: 20px 0 28px;
    border-top: 1px solid var(--color-border);
    font-size: 13px;
    color: var(--color-text-muted);
}

.site-footer__tagline {
    font-size: 12px;
}

@media (max-width: 900px) {
    .site-footer__main {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .site-footer__about {
        grid-column: 1 / -1;
        max-width: 480px;
    }
}

@media (max-width: 560px) {
    .site-footer__main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 24px;
    }

    .site-footer__column:last-child {
        grid-column: 1 / -1;
    }
}

/* ==========================================================================
   Buttons, links, chips, badges
   ========================================================================== */

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 4px;
}

.button-row--spaced {
    gap: 10px 20px;
    align-items: center;
}

.button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
    flex: none;
    line-height: 1;
    letter-spacing: -.005em;
}

.button__arrow {
    transition: transform .2s ease;
}

.button:hover .button__arrow {
    transform: translateX(3px);
}

.button--primary {
    background: var(--color-accent);
    color: #FFFFFF;
    box-shadow: var(--shadow-button);
}

.button--primary:hover {
    background: var(--color-accent-hover);
}

.button--secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
    box-shadow: var(--shadow-soft);
}

.button--secondary:hover {
    border-color: var(--color-border-hover);
}

.button--light {
    background: var(--color-button-light);
    color: var(--color-button-light-text);
}

.button--light:hover {
    background: var(--color-button-light-hover);
}

.button--small {
    min-height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 13px;
}

@media (max-width: 760px) {
    .button-row:has(.button--block-mobile) {
        flex-direction: column;
        padding-top: 6px;
    }

    .button--block-mobile {
        justify-content: center;
        width: 100%;
    }
}

.link {
    color: var(--color-link);
    font-weight: 500;
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
    transition: background-size .25s ease;
}

.link:hover {
    background-size: 100% 1px;
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
    line-height: 1;
}

.icon-button:hover {
    border-color: var(--color-border-hover);
    color: var(--color-text);
}

.no-js .icon-button[data-copy-link] {
    display: none;
}

.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chip {
    display: inline-flex;
    flex: none;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    transition: background .15s, border-color .15s, color .15s;
    line-height: 1;
}

.chip:hover {
    border-color: var(--color-border-hover);
    color: var(--color-text);
}

.chip[aria-current] {
    background: var(--color-chip-active);
    border-color: var(--color-chip-active);
    color: var(--color-chip-active-text);
}

@media (max-width: 760px) {
    .chip-group {
        flex-wrap: nowrap;
        width: calc(100% + 2 * var(--gutter));
        margin: 0 calc(-1 * var(--gutter));
        padding: 0 var(--gutter);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .chip-group::-webkit-scrollbar {
        display: none;
    }
}

.badge {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 6px;
    background: var(--color-accent-soft);
    color: var(--color-link);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1;
}

.badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-link);
}

.eyebrow--inverse {
    color: var(--color-inverse-accent);
}

.eyebrow__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-icon);
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tag {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    transition: border-color .15s, color .15s;
    line-height: 1;
}

.tag:hover {
    border-color: var(--color-border-hover);
    color: var(--color-text);
}

/* ==========================================================================
   Placeholders (to be replaced with real images)
   ========================================================================== */

.placeholder {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 12px;
    border-radius: 12px;
    background: var(--color-surface-muted);
    box-shadow: var(--placeholder-inset);
    font-size: 12px;
    color: var(--color-text-muted);
    text-align: center;
}

.placeholder--screenshot {
    flex: 1;
    min-height: 340px;
}

.placeholder--hero-screenshot {
    flex: 1.3 1 480px;
    min-width: 0;
    aspect-ratio: 16 / 10;
    border-radius: 16px;
}

.placeholder--photo {
    aspect-ratio: 4 / 5;
    border-radius: 16px;
    background: var(--color-placeholder-strong);
}

.photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 16px;
}

/* ==========================================================================
   Home
   ========================================================================== */

.hero {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-top: clamp(56px, 8vw, 96px);
    padding-bottom: clamp(56px, 7vw, 88px);
}

/* Negative z-index keeps the decoration under the text; isolation on .hero scopes it. */
.hero__circuit {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: min(48%, 560px);
    height: 100%;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 70% 72% at 58% 50%, #000 30%, transparent 100%);
    mask-image: radial-gradient(ellipse 70% 72% at 58% 50%, #000 30%, transparent 100%);
}

@media (max-width: 960px) {
    .hero__circuit {
        display: none;
    }
}

.hero__greeting {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.hero__title {
    font-size: clamp(34px, 4.4vw, 52px);
    line-height: 1.02;
    letter-spacing: -.025em;
    font-weight: 700;
}

.hero__title .text-accent {
    display: block;
}

.hero__intro {
    max-width: 580px;
    font-size: 18px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

@media (max-width: 760px) {
    .hero {
        gap: 16px;
        padding-top: 40px;
        padding-bottom: 44px;
    }

    .hero__greeting {
        font-size: 15px;
    }

    .hero__title {
        font-size: 31px;
        line-height: 1.05;
    }

    .hero__intro {
        font-size: 17px;
    }

    .section {
        padding: 40px 0 44px;
    }

}

.home-blog {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 32px 48px;
}

.home-blog__list {
    flex: 1 1 380px;
    min-width: 0;
}

.featured-post {
    flex: 1.15 1 420px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    transition: border-color .2s, box-shadow .2s;
}

.featured-post:hover {
    border-color: var(--color-border-card-hover);
    box-shadow: var(--shadow-card-hover);
}

.featured-post__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 8;
    background: var(--color-surface-muted);
    color: var(--color-icon);
}

.featured-post__icon {
    width: clamp(56px, 8vw, 88px);
    height: clamp(56px, 8vw, 88px);
}

.featured-post__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px 26px 26px;
}

.featured-post__title {
    font-size: 24px;
    line-height: var(--leading-heading);
    letter-spacing: -.02em;
    font-weight: 700;
    transition: color .15s;
}

.featured-post:hover .featured-post__title {
    color: var(--color-link);
}

.featured-post__lead {
    font-size: 16px;
    color: var(--color-text-secondary);
}

@media (max-width: 760px) {
    .featured-post {
        flex-basis: 100%;
    }

    .featured-post__body {
        padding: 18px 20px 20px;
    }

    .featured-post__title {
        font-size: 22px;
    }
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: var(--leading-snug);
}

.post-meta--large {
    padding-top: 4px;
    font-size: 14px;
}

.inverse-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 56px;
    padding: clamp(32px, 5vw, 56px);
    border-radius: 20px;
    background: var(--color-inverse);
    box-shadow: var(--shadow-inverse);
    color: var(--color-inverse-text);
}

.inverse-panel .link {
    color: var(--color-inverse-accent);
}

.inverse-panel--compact {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 16px;
    margin-top: 32px;
    padding: 28px;
    border-radius: 16px;
}

.inverse-panel__intro {
    flex: 1 1 380px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.inverse-panel--compact .inverse-panel__intro {
    flex: 1;
    gap: 8px;
}

.inverse-panel__icon {
    flex: none;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    color: var(--color-inverse-accent);
}

.inverse-panel__title {
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.15;
    letter-spacing: -.02em;
    font-weight: 700;
}

.inverse-panel__subtitle {
    font-size: 17px;
    line-height: var(--leading-snug);
    font-weight: 600;
}

.inverse-panel__text {
    font-size: 16px;
    color: var(--color-inverse-text-muted);
}

.inverse-panel__text--small {
    font-size: 15px;
}

.inverse-panel__action {
    padding-top: 8px;
}

.feature-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.feature-list__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0;
}

.feature-list__item + .feature-list__item {
    border-top: 1px solid var(--color-border);
}

.feature-list__icon {
    flex: none;
    width: 24px;
    height: 24px;
    color: var(--color-icon);
}

.feature-list__title {
    display: block;
    margin-bottom: 3px;
    font-size: 17px;
    line-height: var(--leading-snug);
    font-weight: 600;
    letter-spacing: -.01em;
}

.feature-list__text {
    display: block;
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-text-muted);
}

.feature-list--inverse {
    flex: 1 1 380px;
    min-width: 0;
}

.feature-list--inverse .feature-list__item + .feature-list__item {
    border-top-color: var(--color-inverse-border);
}

.feature-list--inverse .feature-list__icon {
    color: var(--color-inverse-accent);
}

.feature-list--inverse .feature-list__text {
    color: var(--color-inverse-text-muted);
}

.feature-list--bordered {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.feature-list--bordered .feature-list__item {
    padding: 14px 0;
}

.card {
    border-radius: 16px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.app-card {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

.app-card__content {
    flex: 1 1 380px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: clamp(24px, 3.4vw, 40px);
}

.app-card__description {
    font-size: 16px;
    color: var(--color-text-secondary);
}

.app-card__actions {
    margin-top: auto;
}

.app-card__media {
    flex: 1.4 1 440px;
    min-width: 0;
    display: flex;
    padding: clamp(16px, 2.4vw, 28px);
    background: var(--color-background);
    border-left: 1px solid var(--color-border);
}

.app-card__screenshot {
    display: block;
    width: 100%;
    align-self: center;
    border-radius: 12px;
    border: 1px solid var(--color-border);
}

@media (max-width: 900px) {
    .app-card__media {
        border-left: 0;
        border-top: 1px solid var(--color-border);
    }

    .placeholder--screenshot {
        min-height: 220px;
    }
}

.app-heading {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.app-heading__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.app-heading__name {
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: -.02em;
    font-weight: 700;
}

.app-icon {
    flex: none;
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: var(--color-surface);
    box-shadow: var(--placeholder-inset);
}

.app-icon--large {
    width: 80px;
    height: 80px;
    border-radius: 20px;
}

.facts {
    display: grid;
    grid-template-columns: minmax(96px, auto) 1fr;
    font-size: 15px;
    line-height: 1.45;
}

.facts--wide {
    grid-template-columns: minmax(120px, auto) 1fr;
    margin-top: 8px;
}

.facts--compact {
    grid-template-columns: auto 1fr;
    margin-top: 8px;
    font-size: 14px;
}

.facts dt,
.facts dd {
    padding: 11px 0;
    border-top: 1px solid var(--color-border);
}

.facts--compact dt,
.facts--compact dd {
    padding: 10px 0;
}

.facts dt {
    padding-right: 16px;
    color: var(--color-text-muted);
}

.facts dt:nth-last-of-type(1),
.facts dd:last-of-type {
    border-bottom: 1px solid var(--color-border);
}

.about-teaser {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px 64px;
}

.about-teaser__photo {
    flex: 0 1 300px;
    min-width: 0;
}

.about-teaser__content {
    flex: 1 1 420px;
    min-width: 0;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.about-teaser__lead {
    font-size: 16px;
    line-height: 1.5;
}

.about-teaser__text {
    font-size: 16px;
    color: var(--color-text-secondary);
}

.about-teaser .small-note {
    margin-top: 6px;
}

/* ==========================================================================
   Post lists
   ========================================================================== */

.post-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.post-list > li {
    border-bottom: 1px solid var(--color-border);
}

.post-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 4px 20px;
    margin: 0 -12px;
    padding: 18px 12px;
    border-radius: 10px;
    transition: background .15s;
}

.post-row:hover {
    background: var(--color-surface);
}

.post-row__date {
    padding-top: 3px;
    font-size: 12px;
    color: var(--color-text-muted);
}

.post-row__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.post-row__title {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 17px;
    line-height: var(--leading-snug);
    font-weight: 600;
    transition: color .15s;
}

.post-row:hover .post-row__title {
    color: var(--color-link);
}

.post-row__icon {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    color: var(--color-icon);
}

.post-row__lead {
    font-size: 14px;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.post-row__category {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-link);
}

.archive .post-row__title {
    font-size: 18px;
}

.archive .post-row__lead {
    font-size: 15px;
}

.not-found .post-row__title {
    font-size: 16px;
}

@media (max-width: 640px) {
    .post-row {
        grid-template-columns: 1fr;
        margin: 0;
        padding: 16px 0;
    }

    .post-row:hover {
        background: none;
    }

    .post-row__date {
        padding-top: 0;
        order: 2;
    }
}

.archive {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.archive-year {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 0 32px;
    align-items: start;
}

.archive-year__title {
    padding-top: 18px;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-muted);
}

@media (max-width: 720px) {
    .archive-year {
        grid-template-columns: 1fr;
    }
}

.rss-note {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    max-width: 560px;
    padding-top: 8px;
    font-size: 15px;
    color: var(--color-text-secondary);
}

.rss-note__icon {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    color: var(--color-icon);
}

/* ==========================================================================
   Page headers
   ========================================================================== */

.page-header {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: clamp(48px, 7vw, 88px);
    padding-bottom: 40px;
}

.page-header--compact {
    padding-bottom: 32px;
}

.page-title {
    font-size: clamp(32px, 4.2vw, 46px);
    line-height: 1.08;
    letter-spacing: -.025em;
    font-weight: 700;
}

.page-title--archive {
    font-size: clamp(30px, 3.6vw, 38px);
    line-height: 1.1;
    letter-spacing: -.02em;
}

.page-title--prose,
.page-title--app {
    font-size: clamp(32px, 4vw, 44px);
}

.page-title--app {
    line-height: var(--leading-display);
}

.page-title--large {
    font-size: clamp(32px, 4.4vw, 48px);
}

.lead {
    font-size: 20px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--color-text-muted);
    line-height: var(--leading-snug);
}

.post-icon-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--color-accent-soft);
    color: var(--color-icon);
}

.post-icon-tile__icon {
    width: 24px;
    height: 24px;
}

.divider {
    height: 1px;
    margin: 0;
    border: 0;
    background: var(--color-border);
}

/* ==========================================================================
   Prose (Markdown content)
   ========================================================================== */

.prose {
    font-size: 16px;
    line-height: var(--leading-prose);
    color: var(--color-text-prose);
}

.prose > * + * {
    margin-top: 1.1em;
}

.prose h2 {
    margin-top: 2em;
    font-size: 24px;
    line-height: 1.25;
    letter-spacing: -.015em;
    font-weight: 700;
    color: var(--color-text);
}

.prose h3 {
    margin-top: 1.6em;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--color-text);
}

.prose h2 + *,
.prose h3 + * {
    margin-top: 14px;
}

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

.prose ul {
    display: flex;
    flex-direction: column;
    gap: .5em;
    padding: 0;
    list-style: none;
}

.prose ul li {
    position: relative;
    padding-left: 22px;
}

.prose ul li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: .6em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-icon);
}

.prose ol {
    padding-left: 1.4em;
}

.prose ol li + li {
    margin-top: .45em;
}

.prose a {
    color: var(--color-link);
    font-weight: 500;
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
    transition: background-size .25s ease;
}

.prose a:hover {
    background-size: 100% 1px;
}

.prose strong {
    color: var(--color-text);
}

.prose code {
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--color-surface-muted);
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: .84em;
}

.prose pre {
    overflow-x: auto;
    padding: 18px 20px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    line-height: 1.5;
}

.prose pre code {
    padding: 0;
    background: none;
    font-size: 14px;
}

.prose blockquote {
    position: relative;
    margin: 1.8em 0;
    padding: 64px 26px 24px;
    border-radius: 14px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    font-size: 21px;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--color-text);
}

.prose blockquote::before {
    content: '';
    position: absolute;
    top: 24px;
    left: 26px;
    width: 24px;
    height: 24px;
    background: var(--color-icon);
    -webkit-mask: url('../icons/24/blockquote.svg') center / contain no-repeat;
    mask: url('../icons/24/blockquote.svg') center / contain no-repeat;
}

.prose blockquote p + p {
    margin-top: .6em;
}

.prose img {
    display: block;
    border-radius: 12px;
}

.prose hr {
    height: 1px;
    margin: 2.4em 0;
    border: 0;
    background: var(--color-border);
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}

.prose th,
.prose td {
    padding: 10px 12px 10px 0;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

.prose__lead {
    font-size: 20px;
    color: var(--color-text);
    line-height: 1.5;
}

.prose__note {
    font-size: 15px;
    color: var(--color-text-muted);
}

.prose--after-rules {
    padding-top: 32px;
}

.post-content {
    padding-top: 40px;
    padding-bottom: 24px;
}

/* ==========================================================================
   Post footer
   ========================================================================== */

.post-footer {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-top: 8px;
    padding-bottom: clamp(56px, 7vw, 88px);
}

.post-footer__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
}

.notice {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 24px;
    border-radius: 14px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

.notice--narrow {
    flex-wrap: nowrap;
    gap: 14px;
    max-width: 720px;
}

.notice__icon {
    flex: none;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    color: var(--color-icon);
}

.notice__body {
    flex: 1 1 300px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.notice__title {
    font-size: 16px;
    font-weight: 600;
    line-height: var(--leading-snug);
}

.notice__text {
    font-size: 15px;
    color: var(--color-text-secondary);
}

.notice__action {
    padding-top: 8px;
}

.adjacent-posts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 12px;
}

.adjacent-post {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    transition: border-color .15s;
}

a.adjacent-post:hover {
    border-color: var(--color-border-hover);
}

.adjacent-post--next {
    align-items: flex-end;
    text-align: right;
}

.adjacent-post__label {
    font-size: 13px;
    color: var(--color-text-muted);
}

.adjacent-post__title {
    font-size: 15px;
    line-height: var(--leading-snug);
    font-weight: 600;
    transition: color .15s;
}

a.adjacent-post:hover .adjacent-post__title {
    color: var(--color-link);
}

.adjacent-post--empty .adjacent-post__title {
    color: var(--color-text-muted);
    font-weight: 500;
}

.related-posts {
    padding-top: clamp(48px, 6vw, 72px);
    padding-bottom: clamp(48px, 6vw, 72px);
}

.related-posts .section-title {
    margin-bottom: 8px;
}

.related-posts .more-link {
    padding-top: 8px;
}

/* ==========================================================================
   Static pages
   ========================================================================== */

.rule-list {
    margin-top: 8px;
}

.rule {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 0 20px;
    padding: 28px 0;
    border-top: 1px solid var(--color-border);
}

.rule:last-child {
    border-bottom: 1px solid var(--color-border);
}

.rule__number {
    padding-top: 4px;
    font-size: 14px;
    color: var(--color-icon);
}

.rule__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rule__title {
    font-size: 21px;
    line-height: 1.25;
    letter-spacing: -.015em;
    font-weight: 700;
}

.rule__text {
    font-size: 16px;
    color: var(--color-text-secondary);
}

@media (max-width: 640px) {
    .rule {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

.app-hero {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-top: clamp(40px, 6vw, 72px);
}

.app-hero__columns {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 32px 56px;
}

.app-hero__content {
    flex: 1 1 420px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.app-hero__action {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
}

.app-hero__screenshot {
    display: block;
    flex: 1.3 1 480px;
    min-width: 0;
    height: auto;
    border-radius: 16px;
    border: 1px solid var(--color-border);
}

.changelog {
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--color-border);
}

.changelog__item {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 4px 16px;
    padding: 14px 0;
    border-top: 1px solid var(--color-border);
    font-size: 15px;
    line-height: 1.45;
}

.changelog__version {
    font-size: 13px;
    color: var(--color-text-muted);
}

.changelog__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.changelog__date {
    font-size: 12px;
    color: var(--color-text-muted);
}

.faq__item {
    border-top: 1px solid var(--color-border);
}

.faq__item:last-child {
    border-bottom: 1px solid var(--color-border);
}

.faq__question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 18px 0;
    list-style: none;
    cursor: pointer;
    font-size: 17px;
    line-height: var(--leading-snug);
    font-weight: 600;
}

.faq__question::-webkit-details-marker {
    display: none;
}

.faq__toggle {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--color-surface-muted);
    transition: transform .2s, background .15s;
}

.faq__question:hover .faq__toggle {
    background: var(--color-hover-strong);
}

.faq__item[open] .faq__toggle {
    transform: rotate(45deg);
}

.faq__answer {
    max-width: 640px;
    margin-bottom: 18px;
    font-size: 16px;
    color: var(--color-text-secondary);
}

.about-page {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px 72px;
}

.about-page__aside {
    flex: 0 1 320px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.about-page__content {
    flex: 1 1 460px;
    min-width: 0;
    max-width: 680px;
}

.about-page__content .page-title {
    margin-bottom: 20px;
}

.logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
    gap: 10px;
}

.logo-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    font-size: 12px;
    color: var(--color-text-muted);
    text-align: center;
}

.logo-tile img {
    width: auto;
    max-width: 100%;
    max-height: 32px;
    filter: var(--logo-filter);
    opacity: .75;
    transition: filter .2s, opacity .2s;
}

.logo-tile:hover img {
    filter: var(--logo-filter-hover);
    opacity: 1;
}

.not-found {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-top: clamp(64px, 10vw, 128px);
    padding-bottom: clamp(64px, 10vw, 128px);
}

.not-found .eyebrow {
    font-size: 14px;
    color: var(--color-icon);
}

.not-found__recent {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 32px;
}

/* ==========================================================================
   Occasion emoji + local preview switch
   ========================================================================== */

/* Hangs in the gutter left of the logo, so the logo stays aligned with the page content. */
.brand__emoji {
    position: absolute;
    top: 50%;
    right: calc(100% + 8px);
    transform: translateY(-50%);
    font-size: 18px;
    line-height: 1;
}

.brand__emoji::before {
    content: var(--occasion-emoji);
}

/* Below ~700px the gutter (4vw) is narrower than the emoji, so it goes back into the flow. */
@media (max-width: 699px) {
    .brand__emoji {
        position: static;
        transform: none;
    }
}

.occasion-preview {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    font-size: 13px;
}

.occasion-preview__label {
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.occasion-preview__select {
    font: inherit;
    color: var(--color-text);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 4px 6px;
}