/* ============================================================
   THE REF PAGE
   Global Styles
   ============================================================ */


/* ============================================================
   1. LOCAL VARIABLE FONTS
   ============================================================ */

@font-face {
    font-family: "Roboto Flex";
    src: url("/assets/fonts/roboto-flex-variable.woff2") format("woff2");
    font-weight: 100 1000;
    font-stretch: 25% 151%;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Azeret Mono";
    src: url("/assets/fonts/azeret-mono-variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Azeret Mono";
    src: url("/assets/fonts/azeret-mono-italic-variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}


/* ============================================================
   2. DESIGN TOKENS
   ============================================================ */

:root {

    /* --------------------------------------------------------
       Fonts
       -------------------------------------------------------- */

    --font-display: "Roboto Flex", Arial, sans-serif;
    --font-ui: "Roboto Flex", Arial, sans-serif;
    --font-mono: "Azeret Mono", monospace;

    --font-stretch-display: 60%;
    --font-stretch-ui: 88%;
    --font-stretch-body: 100%;

    --font-weight-display: 800;
    --font-spacing-display: 0.035em;


    /* --------------------------------------------------------
       Colors
       -------------------------------------------------------- */

    --color-bg: #e7e4da;
    --color-surface: #f2f0e8;
    --color-surface-2: #d7d4ca;

    --color-text: #1c201e;
    --color-text-muted: #626761;

    --color-border: #1c201e;
    --color-border-soft: #aaa99f;

    --color-accent: #d6a21c;
    --color-accent-hover: #bd8c11;
    --color-accent-text: #171a18;

    --color-teal: #397d78;
    --color-yellow: #d6a21c;
    --color-blue: #587985;
    --color-green: #647b62;


    /* --------------------------------------------------------
       Structure
       -------------------------------------------------------- */

    --border-width: 2px;
    --border-width-heavy: 3px;


    /* --------------------------------------------------------
   Layout
   -------------------------------------------------------- */

    --page-gutter: clamp(0.75rem, 1.6vw, 2rem);

    --interface-padding:
        var(--space-4);

    --content-width:
        900px;

    --section-gap:
        clamp(1rem, 1.5vw, 1.5rem);

    --site-header-inner-height:
        78px;


    /* --------------------------------------------------------
       Spacing
       -------------------------------------------------------- */

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;


    /* --------------------------------------------------------
       Typography
       -------------------------------------------------------- */

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;

    --heading-sm: clamp(1.35rem, 2vw, 1.75rem);
    --heading-md: clamp(1.75rem, 3vw, 2.5rem);
    --heading-lg: clamp(2.5rem, 5vw, 4.75rem);


    /* --------------------------------------------------------
       Motion
       -------------------------------------------------------- */

    --transition-fast: 120ms ease;

    color-scheme: light;
}


/* ============================================================
   3. DARK MODE
   ============================================================ */

@media (prefers-color-scheme: dark) {

    :root:not([data-theme]) {

        --color-bg: #121412;
        --color-surface: #1b1e1b;
        --color-surface-2: #272b27;

        --color-text: #e8e5dc;
        --color-text-muted: #a4a79f;

        --color-border: #d2cec3;
        --color-border-soft: #4a4f49;

        --color-accent: #d9a927;
        --color-accent-hover: #e4b83e;
        --color-accent-text: #111311;

        --color-teal: #4d918b;
        --color-yellow: #d9a927;
        --color-blue: #688894;
        --color-green: #789078;

        color-scheme: dark;
    }
}


:root[data-theme="dark"] {

    --color-bg: #121412;
    --color-surface: #1b1e1b;
    --color-surface-2: #272b27;

    --color-text: #e8e5dc;
    --color-text-muted: #a4a79f;

    --color-border: #d2cec3;
    --color-border-soft: #4a4f49;

    --color-accent: #d9a927;
    --color-accent-hover: #e4b83e;
    --color-accent-text: #111311;

    --color-teal: #4d918b;
    --color-yellow: #d9a927;
    --color-blue: #688894;
    --color-green: #789078;

    color-scheme: dark;
}


/* ============================================================
   4. BASE
   ============================================================ */

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

html {
    scroll-behavior: smooth;

    background: var(--color-surface-2);
}

body {
    margin: 0;

    min-width: 320px;
    min-height: 100vh;

    padding: var(--page-gutter);

    background: var(--color-surface-2);
    color: var(--color-text);

    font-family: var(--font-ui);
    font-size: var(--text-base);
    font-weight: 430;
    font-stretch: var(--font-stretch-body);
    font-optical-sizing: auto;

    line-height: 1.6;

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

img,
svg,
video {
    display: block;

    max-width: 100%;
}

img {
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: default;
}

a {
    color: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
}

p:last-child {
    margin-bottom: 0;
}

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


/* ============================================================
   5. ACCESSIBILITY
   ============================================================ */

.skip-link {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;

    padding: 0.75rem 1rem;

    background: var(--color-accent);
    color: var(--color-accent-text);

    font-family: var(--font-mono);
    font-weight: 700;

    transform: translateY(-120%);
}

.skip-link:focus {
    transform: translateY(0);
}

:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
}

.visually-hidden {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* ============================================================
   6. GLOBAL LAYOUT
   ============================================================ */

.site-container {
    width: 100%;

    margin-inline: auto;
    padding-inline: var(--interface-padding);
}

.content-container {
    width: min(calc(100% - (var(--interface-padding) * 2)),
            var(--content-width));

    margin-inline: auto;
}

main {
    width: 100%;

    border-left: var(--border-width-heavy) solid var(--color-border);
    border-right: var(--border-width-heavy) solid var(--color-border);

    background: var(--color-bg);
}

.main-stack {
    display: flex;
    flex-direction: column;

    gap: var(--section-gap);

    padding-block: var(--section-gap);
}

.section {
    width: 100%;
}

.cluster {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: var(--space-3);
}


/* ============================================================
   7. TYPOGRAPHY
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 0.65em;

    color: var(--color-text);

    font-family: var(--font-display);
    font-weight: var(--font-weight-display);
    font-stretch: var(--font-stretch-display);
    font-optical-sizing: auto;

    line-height: 0.95;

    letter-spacing: var(--font-spacing-display);
    text-transform: uppercase;
}

h1 {
    font-size: var(--heading-lg);
}

h2 {
    font-size: var(--heading-md);
}

h3 {
    font-size: var(--heading-sm);
}

h4 {
    font-size: var(--text-xl);
}

h5 {
    font-size: var(--text-lg);
}

h6 {
    font-size: var(--text-base);
}

p {
    margin-bottom: 1rem;
}

small {
    font-size: var(--text-sm);
}

strong {
    font-weight: 700;
}

.eyebrow {
    display: inline-block;

    margin-bottom: var(--space-2);

    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;

    line-height: 1.3;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.meta {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

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


/* ============================================================
   8. LINKS & BUTTONS
   ============================================================ */

a {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;

    transition:
        color var(--transition-fast),
        background var(--transition-fast);
}

a:hover {
    color: var(--color-accent);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.5rem;

    min-height: 44px;

    padding: 0.65rem 1.1rem;

    border: var(--border-width) solid var(--color-border);

    background: var(--color-surface);
    color: var(--color-text);

    font-family: var(--font-ui);
    font-weight: 750;
    font-stretch: var(--font-stretch-ui);
    font-optical-sizing: auto;

    line-height: 1;

    text-decoration: none;

    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast);
}

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

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

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





/* ============================================================
   9. TAGS & BADGES
   ============================================================ */


/* ============================================================
   TAGS
   ============================================================ */

.tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 28px;

    padding:
        0.3rem 0.6rem;

    border: 1px solid var(--color-border);

    background: var(--color-surface);
    color: var(--color-text);

    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;

    line-height: 1;

    text-decoration: none;

    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast);
}

.tag:hover,
.tag:focus-visible,
.tag.is-active {
    border-color: var(--color-border);

    background: var(--color-accent);
    color: var(--color-accent-text);

    text-decoration: none;
}


/* ============================================================
   CATEGORY BADGES
   ============================================================ */

.category-badge {
    --badge-bg: var(--color-surface-2);
    --badge-text: var(--color-text);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    align-self: center;
    justify-self: center;

    width: auto;
    min-width: 76px;
    min-height: 26px;

    padding:
        0.3rem 0.55rem;

    border:
        1px solid var(--color-border);

    background: var(--badge-bg);
    color: var(--badge-text);

    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 800;

    letter-spacing: 0.055em;
    line-height: 1;

    text-align: center;
    text-transform: uppercase;

    white-space: nowrap;
}


/* ------------------------------------------------------------
   Tech
   Teal
   ------------------------------------------------------------ */

.category-badge--tech {
    --badge-bg: var(--color-teal);
    --badge-text: #ffffff;
}


/* ------------------------------------------------------------
   Web
   Blue
   ------------------------------------------------------------ */

.category-badge--web {
    --badge-bg: var(--color-blue);
    --badge-text: #ffffff;
}


/* ------------------------------------------------------------
   Creator
   Amber
   ------------------------------------------------------------ */

.category-badge--creator {
    --badge-bg: var(--color-accent);
    --badge-text: var(--color-accent-text);
}


/* ------------------------------------------------------------
   Tools
   Green
   ------------------------------------------------------------ */

.category-badge--tools {
    --badge-bg: var(--color-green);
    --badge-text: #ffffff;
}


/* ------------------------------------------------------------
   Reference
   Inverted neutral
   ------------------------------------------------------------ */

.category-badge--reference {
    --badge-bg: var(--color-text);
    --badge-text: var(--color-bg);
}


/* ============================================================
   CATEGORY BADGES - DARK MODE
   ============================================================ */

/* ------------------------------------------------------------
   Manual dark mode
   ------------------------------------------------------------ */

:root[data-theme="dark"] .category-badge--tech,
:root[data-theme="dark"] .category-badge--web,
:root[data-theme="dark"] .category-badge--tools {
    --badge-text: #111311;
}


/* ------------------------------------------------------------
   Device dark mode
   ------------------------------------------------------------ */

@media (prefers-color-scheme: dark) {

    :root:not([data-theme]) .category-badge--tech,
    :root:not([data-theme]) .category-badge--web,
    :root:not([data-theme]) .category-badge--tools {
        --badge-text: #111311;
    }
}





/* ============================================================
   10. FORMS
   ============================================================ */

label {
    display: inline-block;

    margin-bottom: 0.4rem;

    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 600;
}

input,
select,
textarea {
    width: 100%;

    padding: 0.7rem 0.85rem;

    border: var(--border-width) solid var(--color-border);

    background: var(--color-surface);
    color: var(--color-text);

    outline: none;

    transition:
        border-color var(--transition-fast),
        background var(--transition-fast);
}

input::placeholder,
textarea::placeholder {
    color: var(--color-text-muted);

    opacity: 1;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-accent);
}

textarea {
    min-height: 140px;

    resize: vertical;
}


/* ------------------------------------------------------------
   Search bar
   ------------------------------------------------------------ */

.search-bar {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) auto;

    gap: var(--space-2);

    width: 100%;
}

.search-bar input {
    min-height: 52px;

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

.search-bar .button {
    min-width: 120px;
}


/* ============================================================
   11. PANELS & MODULE HEADERS
   ============================================================ */

.panel {
    width: 100%;

    border: var(--border-width) solid var(--color-border);

    background: var(--color-surface);
}

.panel-body {
    padding: var(--space-4);
}

.panel-accent {
    border-left: 6px solid var(--color-accent);
}


/* ------------------------------------------------------------
   Shared module header
   ------------------------------------------------------------ */

.module-header {
    display: flex;
    align-items: stretch;

    min-height: 48px;

    border-bottom: var(--border-width) solid var(--color-border);
}

.module-header-icon {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 48px;

    border-right: var(--border-width) solid var(--color-border);

    background: var(--color-accent);
    color: var(--color-accent-text);

    font-size: 1rem;
}

.module-header-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: var(--space-3);

    min-width: 0;

    padding: 0.65rem 0.9rem;
}

.module-header-title h2 {
    margin: 0;

    font-size: clamp(1.25rem, 2vw, 1.75rem);

    line-height: 1;
}

.module-count {
    color: var(--color-accent);

    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 700;

    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.module-header-meta {
    display: flex;
    align-items: center;

    margin-left: auto;
    padding: 0.65rem 0.9rem;

    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    white-space: nowrap;
}









/* ============================================================
   11A. RELATED CONTENT CARDS
   ------------------------------------------------------------
   Shared by reference pages, tool pages, and future content
   types. Class names are retained for backward compatibility.
   ============================================================ */

.reference-related-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: var(--space-3);
}

.reference-related-card {
    display: flex;
    flex-direction: column;

    min-width: 0;

    padding: var(--space-4);

    border:
        1px solid var(--color-border);

    background: var(--color-bg);
    color: var(--color-text);

    text-decoration: none;

    transition:
        background var(--transition-fast),
        color var(--transition-fast);
}

.reference-related-card:hover,
.reference-related-card:focus-visible {
    background: var(--color-surface-2);
    color: var(--color-text);
}

.reference-related-card .eyebrow {
    margin-bottom: var(--space-2);
}

.reference-related-card strong {
    margin-bottom: var(--space-2);

    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 850;
    font-stretch: var(--font-stretch-display);

    line-height: 1;

    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.reference-related-card p {
    margin: 0;

    color: var(--color-text-muted);

    font-size: var(--text-sm);

    line-height: 1.45;
}

.reference-related-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-3);

    margin-top: auto;
    padding-top: var(--space-4);

    color: var(--color-accent);

    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 800;

    text-transform: uppercase;
}

.reference-related-card-footer i {
    flex: 0 0 auto;

    transition:
        transform var(--transition-fast);
}

.reference-related-card:hover .reference-related-card-footer i,
.reference-related-card:focus-visible .reference-related-card-footer i {
    transform: translateX(3px);
}


/* ------------------------------------------------------------
   Related content responsive
   ------------------------------------------------------------ */

@media (max-width: 900px) {

    .reference-related-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 560px) {

    .reference-related-grid {
        grid-template-columns: 1fr;
    }

}


/* ============================================================
   12. HEADER
   ============================================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    width: 100%;

    border: var(--border-width-heavy) solid var(--color-border);

    background: var(--color-bg);
}


/* ------------------------------------------------------------
   Layout
   ------------------------------------------------------------ */

.header-inner {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;

    min-height:
        var(--site-header-inner-height);

    padding-inline:
        var(--interface-padding);

    gap:
        var(--space-5);
}


/* ------------------------------------------------------------
   Brand
   ------------------------------------------------------------ */

.site-brand {
    display: inline-flex;
    align-items: center;

    flex: 0 0 auto;

    gap: 0.85rem;

    color: var(--color-text);

    text-decoration: none;
}

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

.site-brand-mark,
.footer-logo-slot {
    position: relative;

    display: block;

    flex: 0 0 auto;

    aspect-ratio: 1;
}

.site-brand-mark {
    width: 46px;
}

.footer-logo-slot {
    width: 60px;
}


/* ------------------------------------------------------------
   Theme-aware logos
   ------------------------------------------------------------ */

.theme-logo {
    display: block;
}

.theme-logo-light {
    display: block;
}

.theme-logo-dark {
    display: none;
}


/* Manual dark mode */

:root[data-theme="dark"] .theme-logo-light {
    display: none;
}

:root[data-theme="dark"] .theme-logo-dark {
    display: block;
}


/* Device dark mode when no manual preference is set */

@media (prefers-color-scheme: dark) {

    :root:not([data-theme]) .theme-logo-light {
        display: none;
    }

    :root:not([data-theme]) .theme-logo-dark {
        display: block;
    }
}


/* ------------------------------------------------------------
   Brand text
   ------------------------------------------------------------ */

.site-brand-text {
    display: flex;
    flex-direction: column;

    min-width: 0;

    line-height: 1;
}

.site-brand-name {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.3vw, 2.1rem);
    font-weight: 900;
    font-stretch: 70%;
    font-optical-sizing: auto;

    line-height: 0.9;

    letter-spacing: 0.035em;
    text-transform: uppercase;

    white-space: nowrap;
}

.site-brand-tagline {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    margin-top: 0.35rem;

    font-family: var(--font-mono);
    font-size: clamp(0.5rem, 0.72vw, 0.63rem);
    font-weight: 600;

    line-height: 1;

    letter-spacing: clamp(0.06em, 0.12vw, 0.12em);
    text-transform: uppercase;

    white-space: nowrap;
}


/* ------------------------------------------------------------
   Controls
   ------------------------------------------------------------ */

.header-controls {
    display: flex;
    align-items: stretch;

    flex: 0 0 auto;

    margin-left: auto;

    border: var(--border-width) solid var(--color-border);

    background: var(--color-bg);
}

.site-nav {
    display: flex;
    align-items: stretch;
}

.site-nav a,
.site-nav button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding: 0.65rem 1.15rem;

    border: 0;
    border-right: var(--border-width) solid var(--color-border);

    background: transparent;
    color: var(--color-text);

    font-family: var(--font-ui);
    font-weight: 750;
    font-stretch: var(--font-stretch-ui);
    font-optical-sizing: auto;

    line-height: 1;

    text-decoration: none;

    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast);
}


/* ------------------------------------------------------------
   Navigation states
   ------------------------------------------------------------ */

/* Hover + exact current page */

.site-nav a:hover,
.site-nav button:hover,
.site-nav a[aria-current="page"] {
    background: var(--color-accent);
    color: var(--color-accent-text);
}


/* Current section / parent location */

.site-nav a[aria-current="location"] {
    background: var(--color-surface-2);
    color: var(--color-text);

    box-shadow:
        inset 0 -3px 0 var(--color-accent);
}


/* Current section hover */

.site-nav a[aria-current="location"]:hover {
    background: var(--color-accent);
    color: var(--color-accent-text);

    box-shadow: none;
}


/* ------------------------------------------------------------
   Header icon buttons
   ------------------------------------------------------------ */

.header-icon-button {
    display: inline-grid;
    place-items: center;

    flex: 0 0 auto;

    width: 46px;
    min-height: 44px;

    padding: 0;

    border: 0;

    background: transparent;
    color: var(--color-text);

    transition:
        background var(--transition-fast),
        color var(--transition-fast);
}

.header-icon-button:hover {
    background: var(--color-text);
    color: var(--color-bg);
}

.header-icon-button i {
    pointer-events: none;

    font-size: 1rem;
}

.header-search {
    border-right: var(--border-width) solid var(--color-border);
}


/* ------------------------------------------------------------
   Mobile menu
   ------------------------------------------------------------ */

.menu-toggle {
    display: none;
}

.menu-toggle .menu-icon-open {
    display: block;
}

.menu-toggle .menu-icon-close {
    display: none;
}

.menu-toggle[aria-expanded="true"] .menu-icon-open {
    display: none;
}

.menu-toggle[aria-expanded="true"] .menu-icon-close {
    display: block;
}

.site-nav-search {
    display: none !important;
}









/* ============================================================
   13. FOOTER
   ============================================================ */

.site-footer {
    width: 100%;

    margin-top: 0;

    border: var(--border-width-heavy) solid var(--color-border);

    background: var(--color-surface-2);
    color: var(--color-text);
}

.footer-inner {
    width: 100%;
}


/* ------------------------------------------------------------
   Main footer grid
   ------------------------------------------------------------ */

.footer-main {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    align-items: stretch;
}

.footer-brand,
.footer-column {
    min-width: 0;

    margin: 0;
    padding: var(--space-4);

    align-self: stretch;
}

.footer-brand {
    border-right: 1px solid var(--color-border-soft);
}

.footer-column {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
}

.footer-column>.eyebrow {
    display: block;

    margin:
        0 0 var(--space-2);

    line-height: 1;
}


/* ------------------------------------------------------------
   Brand
   ------------------------------------------------------------ */

.footer-brand {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.footer-brand-link {
    display: flex;
    align-items: center;

    gap: var(--space-3);

    margin: 0;
    padding: 0;

    color: var(--color-text);

    line-height: 1;

    text-decoration: none;
}

.footer-brand-link:hover,
.footer-brand-link:focus-visible {
    color: var(--color-text);

    text-decoration: none;
}

.footer-brand-link * {
    text-decoration: none;
}

.footer-logo-slot {
    display: grid;
    flex: 0 0 auto;

    place-items: center;

    margin: 0;
    padding: 0;

    line-height: 0;
}

.footer-logo-slot img {
    margin: 0;
}

.footer-brand-copy {
    display: flex;
    justify-content: center;
    flex-direction: column;

    min-width: 0;

    margin: 0;
    padding: 0;

    line-height: 1;
}

.footer-brand-name {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 900;
    font-stretch: 70%;
    font-optical-sizing: auto;

    line-height: 0.95;

    letter-spacing: 0.035em;
    text-transform: uppercase;

    white-space: nowrap;
}

.footer-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 0;
    min-width: 100%;

    margin-top: 0.35rem;

    color: var(--color-text-muted);

    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 600;

    line-height: 1;

    letter-spacing: 0.03em;
    text-transform: uppercase;

    white-space: nowrap;
}


/* ------------------------------------------------------------
   Explore
   ------------------------------------------------------------ */

.footer-explore {
    border-right: 1px solid var(--color-border-soft);
}

.footer-nav {
    display: flex;
    flex-direction: column;

    width: 100%;

    border-top: 1px solid var(--color-border-soft);
}

.footer-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-4);

    width: 100%;

    padding: 0.45rem 0;

    border-bottom: 1px solid var(--color-border-soft);

    color: var(--color-text);

    font-family: var(--font-ui);
    font-weight: 700;
    font-stretch: var(--font-stretch-ui);
    font-optical-sizing: auto;

    line-height: 1;

    text-decoration: none;

    transition:
        color var(--transition-fast),
        padding-left var(--transition-fast);
}

.footer-nav a i {
    flex: 0 0 auto;

    color: var(--color-text-muted);

    font-size: 0.7rem;

    pointer-events: none;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}

.footer-nav a:hover {
    padding-left: 0.35rem;

    color: var(--color-accent);
}

.footer-nav a:hover i {
    color: var(--color-accent);

    transform: translateX(3px);
}


/* ------------------------------------------------------------
   Current footer navigation item
   ------------------------------------------------------------ */

.footer-nav a[aria-current="page"] {
    color: var(--color-accent);

    font-weight: 800;
}

.footer-nav a[aria-current="page"] i {
    color: var(--color-accent);
}


/* ------------------------------------------------------------
   Connect
   ------------------------------------------------------------ */

.footer-connect {
    align-items: flex-start;
}

.footer-email {
    display: inline-flex;
    align-items: center;

    gap: var(--space-2);

    max-width: 100%;

    margin: 0;

    color: var(--color-text);

    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;

    line-height: 1;

    text-decoration: none;
}

.footer-email:hover {
    color: var(--color-accent);
}

.footer-email span {
    overflow-wrap: anywhere;
}

.footer-social {
    display: flex;
    align-items: center;

    gap: var(--space-2);

    margin-top: var(--space-3);
}

.footer-social-link {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    border: 1px solid var(--color-border);

    background: var(--color-bg);
    color: var(--color-text);

    text-decoration: none;

    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}

.footer-social-link:hover {
    border-color: var(--color-accent);

    background: var(--color-accent);
    color: var(--color-accent-text);
}

.footer-social-link:active {
    transform: translateY(1px);
}

.footer-social-link i {
    pointer-events: none;

    font-size: 0.95rem;
}


/* ------------------------------------------------------------
   Lower footer
   ------------------------------------------------------------ */

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-5);

    width: 100%;

    padding:
        0.8rem var(--interface-padding);

    border-top: 1px solid var(--color-border-soft);
}

.footer-copyright {
    margin: 0;

    color: var(--color-text-muted);

    font-family: var(--font-mono);
    font-size: var(--text-xs);

    line-height: 1.4;
}

.footer-legal {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap:
        var(--space-2) var(--space-4);
}

.footer-legal a,
.footer-legal button {
    padding: 0;

    border: 0;

    background: transparent;
    color: var(--color-text-muted);

    font-family: var(--font-mono);
    font-size: var(--text-xs);

    line-height: inherit;

    text-decoration: none;
}

.footer-legal button {
    cursor: pointer;
}

.footer-legal a:hover,
.footer-legal button:hover {
    color: var(--color-accent);
}

.footer-legal a[aria-current="page"] {
    color: var(--color-accent);

    font-weight: 700;
}


/* ------------------------------------------------------------
   Footer responsive
   ------------------------------------------------------------ */

@media (max-width: 900px) {

    .footer-main {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .footer-brand {
        border-right: 1px solid var(--color-border-soft);
    }

    .footer-explore {
        border-right: 0;
    }

    .footer-connect {
        grid-column: 1 / -1;

        border-top: 1px solid var(--color-border-soft);
    }
}


@media (max-width: 640px) {

    .footer-main {
        grid-template-columns: 1fr;
    }

    .footer-brand,
    .footer-explore,
    .footer-connect {
        grid-column: auto;

        border-right: 0;
    }

    .footer-explore,
    .footer-connect {
        border-top: 1px solid var(--color-border-soft);
    }

    .footer-brand,
    .footer-column {
        padding:
            1.4rem var(--interface-padding);
    }

    .footer-logo-slot {
        width: 50px;
    }

    .footer-brand-name {
        font-size: 1.4rem;
    }

    .footer-meta {
        font-size: 0.52rem;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;

        gap: var(--space-3);
    }
}








/* ============================================================
   14. COOKIE CONSENT
   ============================================================ */

.cookie-consent {
    position: fixed;

    right: var(--page-gutter);
    bottom: var(--page-gutter);
    left: var(--page-gutter);

    z-index: 5000;

    border: var(--border-width-heavy) solid var(--color-border);

    background: var(--color-surface);
    color: var(--color-text);
}

.cookie-consent[hidden],
.cookie-consent-summary[hidden],
.cookie-consent-options[hidden] {
    display: none !important;
}

.cookie-consent-inner {
    width: 100%;

    background: var(--color-surface);
}


/* ------------------------------------------------------------
   Initial view
   ------------------------------------------------------------ */

.cookie-consent-summary {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) auto;

    align-items: center;

    gap: clamp(var(--space-5), 4vw, var(--space-8));

    width: 100%;

    padding:
        1.25rem var(--interface-padding);
}

.cookie-consent-copy {
    min-width: 0;
    max-width: 900px;
}

.cookie-consent-copy .eyebrow {
    color: var(--color-text);
}

.cookie-consent-title {
    margin:
        0 0 var(--space-2);

    color: var(--color-text);

    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2vw, 1.9rem);
    font-weight: var(--font-weight-display);
    font-stretch: var(--font-stretch-display);
    font-optical-sizing: auto;

    line-height: 1;

    letter-spacing: var(--font-spacing-display);
    text-transform: uppercase;
}

.cookie-consent-text {
    max-width: 850px;

    margin:
        0 0 var(--space-2);

    font-size: var(--text-sm);

    line-height: 1.5;
}

.cookie-consent-note {
    max-width: 850px;

    margin: 0;

    color: var(--color-text-muted);

    font-family: var(--font-mono);
    font-size: var(--text-xs);

    line-height: 1.45;
}

.cookie-consent-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    flex: 0 0 auto;

    gap: var(--space-2);
}

.cookie-consent-actions .button {
    white-space: nowrap;
}


/* ------------------------------------------------------------
   Options
   ------------------------------------------------------------ */

.cookie-consent-options {
    width: 100%;

    background: var(--color-surface);
}

.cookie-consent-options-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: var(--space-4);

    width: 100%;

    padding:
        1rem var(--interface-padding);

    border-bottom: var(--border-width) solid var(--color-border);

    background: var(--color-surface-2);
}

.cookie-consent-options-header .eyebrow {
    margin-bottom: var(--space-2);
}

.cookie-consent-options-header .cookie-consent-title {
    margin-bottom: 0;
}

.cookie-consent-close {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 40px;
    height: 40px;

    padding: 0;

    border: 1px solid var(--color-border);

    background: var(--color-bg);
    color: var(--color-text);

    transition:
        background var(--transition-fast),
        color var(--transition-fast);
}

.cookie-consent-close:hover {
    background: var(--color-text);
    color: var(--color-bg);
}


/* ------------------------------------------------------------
   Option rows
   ------------------------------------------------------------ */

.cookie-consent-option {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) auto;

    align-items: center;

    gap: var(--space-5);

    width: 100%;

    padding:
        0.9rem var(--interface-padding);

    border-bottom: 1px solid var(--color-border-soft);
}

.cookie-consent-option:last-of-type {
    border-bottom: 0;
}

.cookie-consent-option-copy {
    min-width: 0;
}

.cookie-consent-option-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: var(--space-3);

    margin-bottom: 0.3rem;
}

.cookie-consent-option-heading h3 {
    margin: 0;

    font-size: var(--text-lg);

    line-height: 1;
}

.cookie-consent-option-copy p {
    max-width: 850px;

    margin: 0;

    color: var(--color-text-muted);

    font-family: var(--font-mono);
    font-size: var(--text-xs);

    line-height: 1.45;
}

.cookie-consent-status,
.cookie-consent-option-meta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 22px;

    padding: 0.2rem 0.45rem;

    border: 1px solid var(--color-border-soft);

    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.05em;
    text-transform: uppercase;

    white-space: nowrap;
}

.cookie-consent-status {
    background: var(--color-teal);
    color: #111;
}

.cookie-consent-option-meta {
    background: var(--color-surface-2);
    color: var(--color-text-muted);
}


/* ------------------------------------------------------------
   Mechanical switches
   ------------------------------------------------------------ */

.cookie-consent-switch-wrap,
.cookie-consent-switch-label {
    display: inline-flex;
    align-items: center;

    flex: 0 0 auto;
}

.cookie-consent-switch-label {
    cursor: pointer;
}

.cookie-consent-switch-label input {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);
    white-space: nowrap;

    border: 0;
}

.cookie-consent-switch {
    position: relative;

    display: block;

    width: 58px;
    height: 30px;

    border: var(--border-width) solid var(--color-border);

    background: var(--color-surface-2);

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast);
}

.cookie-consent-switch-handle {
    position: absolute;

    top: 4px;
    left: 4px;

    width: 18px;
    height: 18px;

    border: 1px solid var(--color-border);

    background: var(--color-text);

    transition:
        left var(--transition-fast),
        background var(--transition-fast);
}

.cookie-consent-switch-label input:checked+.cookie-consent-switch {
    background: var(--color-accent);
}

.cookie-consent-switch-label input:checked+.cookie-consent-switch .cookie-consent-switch-handle {
    left: 32px;

    background: var(--color-accent-text);
}

.cookie-consent-switch-label input:focus-visible+.cookie-consent-switch {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
}

.cookie-consent-switch-fixed {
    background: var(--color-teal);
}

.cookie-consent-switch-fixed .cookie-consent-switch-handle {
    left: 32px;

    background: #111;
}


/* ------------------------------------------------------------
   Options actions
   ------------------------------------------------------------ */

.cookie-consent-options-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;

    gap: var(--space-2);

    width: 100%;

    padding:
        1rem var(--interface-padding);

    border-top: var(--border-width) solid var(--color-border);

    background: var(--color-surface-2);
}


/* ------------------------------------------------------------
   Cookie responsive
   ------------------------------------------------------------ */

@media (max-width: 760px) {

    .cookie-consent-summary {
        grid-template-columns: 1fr;

        gap: var(--space-4);
    }

    .cookie-consent-actions {
        justify-content: flex-start;
    }
}


@media (max-width: 540px) {

    .cookie-consent {
        max-height:
            calc(100dvh - (var(--page-gutter) * 2));

        overflow-y: auto;
    }

    .cookie-consent-summary {
        padding: var(--space-4);
    }

    .cookie-consent-actions,
    .cookie-consent-options-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .cookie-consent-actions .button,
    .cookie-consent-options-actions .button {
        width: 100%;
    }

    .cookie-consent-options-header,
    .cookie-consent-option,
    .cookie-consent-options-actions {
        padding-inline: var(--space-4);
    }

    .cookie-consent-option {
        gap: var(--space-3);
    }

    .cookie-consent-option-heading {
        gap: var(--space-2);
    }
}





/* ============================================================
   15. GLOBAL RESPONSIVE
   ============================================================ */


/* ============================================================
   TABLET / MOBILE NAVIGATION
   ============================================================ */

@media (max-width: 900px) {

    /* ------------------------------------------------------------
       Header
       ------------------------------------------------------------ */

    :root {
        --site-header-inner-height:
            68px;
    }


    /* ------------------------------------------------------------
       Mobile navigation panel
       ------------------------------------------------------------ */

    .site-nav {
        position: absolute;

        top: 100%;
        left: 50%;
        right: auto;
        z-index: 1001;

        display: none;
        flex-direction: column;

        width:
            min(360px,
                calc(100% - (var(--interface-padding) * 2)));

        max-height:
            calc(100dvh - 86px);

        overflow-y: auto;

        border:
            var(--border-width) solid var(--color-border);

        border-bottom:
            4px solid var(--color-border);

        background: var(--color-surface);

        transform:
            translateX(-50%);

        overscroll-behavior: contain;
    }

    .site-nav.is-open {
        display: flex;
    }


    /* ------------------------------------------------------------
       Navigation links
       ------------------------------------------------------------ */

    .site-nav a,
    .site-nav button {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: flex-start;

        width: 100%;
        min-height: 48px;

        padding:
            0.7rem 2.75rem 0.7rem 0.9rem;

        border: 0;
        border-bottom:
            1px solid var(--color-border-soft);

        background: var(--color-surface);
        color: var(--color-text);

        font-family: var(--font-ui);
        font-size: 0.95rem;
        font-weight: 800;
        font-stretch: var(--font-stretch-ui);
        font-optical-sizing: auto;

        line-height: 1;

        text-align: left;
        text-decoration: none;

        transition:
            background var(--transition-fast),
            color var(--transition-fast),
            padding-left var(--transition-fast);
    }


    /* ------------------------------------------------------------
       Navigation arrow
       ------------------------------------------------------------ */

    .site-nav a::after {
        position: absolute;

        top: 50%;
        right: 0.9rem;

        color: var(--color-text-muted);

        font-family: var(--font-mono);
        font-size: var(--text-sm);
        font-weight: 800;

        content: "→";

        transform:
            translateY(-50%);

        transition:
            color var(--transition-fast),
            transform var(--transition-fast);
    }


    /* ------------------------------------------------------------
       Navigation hover
       ------------------------------------------------------------ */

    .site-nav a:hover,
    .site-nav button:hover {
        padding-left: 1.1rem;

        background: var(--color-surface-2);
        color: var(--color-text);
    }

    .site-nav a:hover::after {
        color: var(--color-accent);

        transform:
            translate(3px, -50%);
    }


    /* ------------------------------------------------------------
       Exact current page
       ------------------------------------------------------------ */

    .site-nav a[aria-current="page"] {
        padding-left: 1.1rem;

        background: var(--color-accent);
        color: var(--color-accent-text);

        box-shadow:
            inset 4px 0 0 var(--color-border);
    }

    .site-nav a[aria-current="page"]::after {
        color: var(--color-accent-text);

        content: "●";

        font-size: 0.5rem;
    }


    /* ------------------------------------------------------------
       Current section / parent location
       ------------------------------------------------------------ */

    .site-nav a[aria-current="location"] {
        padding-left: 1.1rem;

        background: var(--color-surface-2);
        color: var(--color-text);

        box-shadow:
            inset 4px 0 0 var(--color-accent);
    }

    .site-nav a[aria-current="location"]::after {
        color: var(--color-accent);
    }


    /* ------------------------------------------------------------
       Current section hover
       ------------------------------------------------------------ */

    .site-nav a[aria-current="location"]:hover {
        background: var(--color-accent);
        color: var(--color-accent-text);

        box-shadow:
            inset 4px 0 0 var(--color-border);
    }

    .site-nav a[aria-current="location"]:hover::after {
        color: var(--color-accent-text);
    }


    /* ------------------------------------------------------------
       Last normal navigation item
       ------------------------------------------------------------ */

    .site-nav>a:last-of-type {
        border-bottom: 0;
    }


    /* ------------------------------------------------------------
       Mobile search
       ------------------------------------------------------------ */

    .site-nav-search {
        display: flex !important;
        align-items: center;

        gap: var(--space-3);

        min-height: 50px;

        margin: 0;

        padding:
            0.7rem 0.9rem;

        border-top:
            var(--border-width) solid var(--color-border) !important;

        border-bottom: 0 !important;

        background: var(--color-surface-2) !important;
        color: var(--color-text) !important;

        font-family: var(--font-mono) !important;
        font-size: var(--text-sm) !important;
        font-weight: 800 !important;

        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .site-nav-search i {
        width: 20px;

        color: var(--color-accent);

        text-align: center;
    }

    .site-nav-search:hover,
    .site-nav-search:focus-visible {
        padding-left: 1.1rem;

        background: var(--color-accent) !important;
        color: var(--color-accent-text) !important;
    }

    .site-nav-search:hover i,
    .site-nav-search:focus-visible i {
        color: var(--color-accent-text);
    }


    /* ------------------------------------------------------------
       Header utility controls
       ------------------------------------------------------------ */

    .header-search {
        display: none;
    }

    .theme-toggle {
        border-right:
            var(--border-width) solid var(--color-border);
    }

    .menu-toggle {
        display: inline-grid;
    }
}


/* ============================================================
   PHONE
   ============================================================ */

@media (max-width: 640px) {

    /* ------------------------------------------------------------
       Global mobile tokens
       ------------------------------------------------------------ */

    :root {
        --border-width-heavy: 2px;
        --page-gutter: 0.5rem;
        --interface-padding: 0.75rem;
        --section-gap: 0.75rem;
    }


    /* ------------------------------------------------------------
       Brand
       ------------------------------------------------------------ */

    .site-brand {
        gap: 0.65rem;
    }

    .site-brand-mark {
        width: 40px;
    }

    .site-brand-name {
        font-size: 1.35rem;
    }

    .site-brand-tagline {
        display: none;
    }


    /* ------------------------------------------------------------
       Header controls
       ------------------------------------------------------------ */

    .header-icon-button {
        width: 42px;
    }


    /* ------------------------------------------------------------
       Mobile navigation
       Align with main content
       ------------------------------------------------------------ */

    .site-nav {
        left: 50%;
        right: auto;

        width:
            calc(100% - (var(--interface-padding) * 2));

        max-width: none;

        border:
            var(--border-width) solid var(--color-border);

        border-bottom:
            5px solid var(--color-border);

        transform:
            translateX(-50%);
    }

    .site-nav a,
    .site-nav button {
        min-height: 46px;

        font-size: 0.92rem;
    }

    .site-nav-search {
        min-height: 48px;
    }


    /* ------------------------------------------------------------
       Search bars
       ------------------------------------------------------------ */

    .search-bar {
        grid-template-columns: 1fr;
    }

    .search-bar .button {
        width: 100%;
    }


    /* ------------------------------------------------------------
       Module headers
       ------------------------------------------------------------ */

    .module-header-meta {
        display: none;
    }

    .module-header-icon {
        width: 44px;
    }

    .module-header-title {
        gap: var(--space-2);

        padding:
            0.55rem 0.7rem;
    }

    .module-header-title h2 {
        font-size: 1.1rem;
    }

    .module-count {
        font-size: 0.65rem;
    }
}


/* ============================================================
   SMALL PHONE
   ============================================================ */

@media (max-width: 460px) {

    /* ------------------------------------------------------------
       Brand
       ------------------------------------------------------------ */

    .site-brand-mark {
        width: 38px;
    }

    .site-brand-name {
        font-size: 1.2rem;
    }


    /* ------------------------------------------------------------
       Header controls
       ------------------------------------------------------------ */

    .header-icon-button {
        width: 40px;
    }
}






/* ============================================================
   16. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }
}





/* ============================================================
   17. CONTENT PAGES
   ============================================================ */

.content-page {
    width: 100%;

    overflow: hidden;
}


/* ------------------------------------------------------------
   Page header
   ------------------------------------------------------------ */

.content-page-header {
    padding: clamp(1.25rem, 2vw, 2rem);

    border-bottom: var(--border-width) solid var(--color-border);

    background: var(--color-surface-2);
}

.content-page-header h1 {
    max-width: 900px;

    margin-bottom: var(--space-4);

    font-size: var(--heading-md);
}

.content-page-lead {
    max-width: 850px;

    margin-bottom: 0;

    font-size: var(--text-lg);
    font-weight: 550;

    line-height: 1.55;
}

.content-page-meta {
    margin:
        var(--space-4) 0 0;

    color: var(--color-text-muted);

    font-family: var(--font-mono);
    font-size: var(--text-xs);

    line-height: 1.4;

    letter-spacing: 0.04em;
    text-transform: uppercase;
}


/* ------------------------------------------------------------
   Page body
   ------------------------------------------------------------ */

.content-page-body {
    width: 100%;
}

.content-section {
    padding: clamp(1.25rem, 2vw, 2rem);

    border-bottom: 1px solid var(--color-border-soft);
}

.content-section[id] {
    scroll-margin-top: 6rem;
}

.content-section:last-child {
    border-bottom: 0;
}

.content-section h2 {
    max-width: 900px;

    margin-bottom: var(--space-4);

    font-size: var(--heading-sm);
}

.content-section h3 {
    max-width: 900px;

    margin:
        var(--space-5) 0 var(--space-2);

    font-size: var(--text-xl);
}

.content-section p,
.content-section ul,
.content-section ol {
    max-width: 900px;
}

.content-section ul,
.content-section ol {
    margin:
        0 0 var(--space-4);

    padding-left: 1.4rem;
}

.content-section li+li {
    margin-top: var(--space-2);
}

.content-section a:not(.button) {
    color: var(--color-accent);
}

.content-section a:not(.button):hover {
    color: var(--color-accent-hover);
}


/* ------------------------------------------------------------
   Content page responsive
   ------------------------------------------------------------ */

@media (max-width: 640px) {

    .content-page-header,
    .content-section {
        padding: var(--space-4);
    }

    .content-page-header h1 {
        font-size: var(--heading-sm);
    }

    .content-page-lead {
        font-size: var(--text-base);
    }
}





/* ============================================================
   18. SCROLL TO TOP
   ============================================================ */

.scroll-top {
    position: fixed;

    right: calc(var(--page-gutter) + var(--border-width-heavy));
    bottom: calc(var(--page-gutter) + var(--border-width-heavy));

    z-index: 900;

    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;

    padding: 0;

    border: var(--border-width) solid var(--color-border);

    background: var(--color-surface);
    color: var(--color-text);

    font-size: 1rem;

    opacity: 0;
    visibility: hidden;

    transform: translateY(10px);

    pointer-events: none;

    box-sizing: border-box;

    transition:
        opacity var(--transition-fast),
        transform var(--transition-fast),
        visibility var(--transition-fast),
        background var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast);
}

.scroll-top.is-visible {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;
}

.scroll-top:hover {
    background: var(--color-accent);
    color: var(--color-accent-text);
    border-color: var(--color-accent);
}

.scroll-top:active {
    transform: translateY(1px);
}

.scroll-top i {
    pointer-events: none;
    font-size: 1rem;
}

@media (max-width: 640px) {
    .scroll-top {
        width: 42px;
        height: 42px;
    }
}




/* ============================================================
   19. FORM LAYOUTS
   ============================================================ */

.form {
    width: 100%;
}


/* ------------------------------------------------------------
   Form grid
   ------------------------------------------------------------ */

.form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: var(--space-4);
}

.form-field {
    min-width: 0;
}

.form-field--full {
    grid-column: 1 / -1;
}

.form-field label {
    display: inline-block;

    margin-bottom: var(--space-2);

    color: var(--color-text);

    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;

    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.form-required {
    color: var(--color-accent);
}


/* ------------------------------------------------------------
   Inputs
   ------------------------------------------------------------ */

.form-field input:not([type="checkbox"]):not([type="radio"]),
.form-field select,
.form-field textarea {
    width: 100%;

    border: var(--border-width) solid var(--color-border);

    background: var(--color-surface);
    color: var(--color-text);

    font: inherit;
}

.form-field input:not([type="checkbox"]):not([type="radio"]),
.form-field select {
    min-height: 52px;

    padding:
        0 var(--space-3);
}

.form-field select {
    cursor: pointer;
}

.form-field textarea {
    min-height: 180px;

    padding: var(--space-3);

    resize: vertical;
}


/* ------------------------------------------------------------
   Checkbox
   ------------------------------------------------------------ */

.form-checkbox {
    display: flex;
    align-items: flex-start;

    gap: var(--space-3);

    margin: 0;
}

.form-checkbox input {
    flex: 0 0 auto;

    width: 18px;
    height: 18px;

    margin-top: 0.2rem;

    accent-color: var(--color-accent);
}

.form-checkbox-text {
    color: var(--color-text);

    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 430;

    line-height: 1.5;
}


/* ------------------------------------------------------------
   Actions
   ------------------------------------------------------------ */

.form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: var(--space-3);

    margin-top: var(--space-5);
}

.form-note {
    max-width: 700px;

    margin: var(--space-3) 0 0;

    color: var(--color-text-muted);

    font-family: var(--font-mono);
    font-size: var(--text-xs);

    line-height: 1.5;
}


/* ------------------------------------------------------------
   Honeypot
   ------------------------------------------------------------ */

.form-honeypot {
    position: absolute !important;

    left: -10000px !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;
}


/* ============================================================
   20. CONTACT PAGE
   ============================================================ */

.contact-layout {
    display: grid;

    grid-template-columns:
        minmax(240px, 0.7fr) minmax(0, 1.8fr);

    width: 100%;
}

.contact-details {
    padding: clamp(1.25rem, 2vw, 2rem);

    border-right: var(--border-width) solid var(--color-border);

    background: var(--color-surface-2);
}

.contact-details h2 {
    margin-bottom: var(--space-4);

    font-size: var(--heading-sm);
}

.contact-details p {
    max-width: 520px;
}

.contact-email {
    display: inline-flex;
    align-items: center;

    gap: var(--space-2);

    margin-top: var(--space-2);

    color: var(--color-accent);

    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 700;

    text-decoration: none;
}

.contact-email:hover {
    color: var(--color-accent-hover);
}

.contact-points {
    margin:
        var(--space-5) 0 0;

    padding: 0;

    list-style: none;
}

.contact-points li {
    padding:
        var(--space-3) 0;

    border-top: 1px solid var(--color-border-soft);

    color: var(--color-text-muted);

    font-family: var(--font-mono);
    font-size: var(--text-xs);

    line-height: 1.45;
}

.contact-points li:last-child {
    border-bottom: 1px solid var(--color-border-soft);
}

.contact-points strong {
    display: block;

    margin-bottom: var(--space-1);

    color: var(--color-text);

    font-family: var(--font-ui);
    font-size: var(--text-sm);

    line-height: 1.3;
}


/* ------------------------------------------------------------
   Contact form panel
   ------------------------------------------------------------ */

.contact-form-panel {
    min-width: 0;

    padding: clamp(1.25rem, 2vw, 2rem);

    background: var(--color-surface);
}

.contact-form-panel h2 {
    margin-bottom: var(--space-3);

    font-size: var(--heading-sm);
}

.contact-form-intro {
    max-width: 760px;

    margin-bottom: var(--space-5);

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


/* ------------------------------------------------------------
   Contact responsive
   ------------------------------------------------------------ */

@media (max-width: 760px) {

    .contact-layout {
        grid-template-columns: 1fr;
    }

    .contact-details {
        border-right: 0;
        border-bottom: var(--border-width) solid var(--color-border);
    }
}


@media (max-width: 560px) {

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-field--full {
        grid-column: auto;
    }

    .form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .form-actions .button {
        width: 100%;
    }
}




/* ============================================================
   21. MESSAGE STATES
   ============================================================ */

.message-state {
    padding: clamp(1.5rem, 3vw, 3rem);

    text-align: center;
}

.message-state-icon {
    display: grid;
    place-items: center;

    width: 64px;
    height: 64px;

    margin:
        0 auto var(--space-5);

    border: var(--border-width) solid var(--color-border);

    background: var(--color-accent);
    color: var(--color-accent-text);

    font-size: 1.5rem;
}

.message-state h1 {
    max-width: 760px;

    margin:
        0 auto var(--space-4);

    font-size: var(--heading-md);
}

.message-state-text {
    max-width: 700px;

    margin:
        0 auto;

    color: var(--color-text-muted);

    font-size: var(--text-lg);

    line-height: 1.55;
}

.message-state-actions {
    justify-content: center;

    margin-top: var(--space-6);
}

.message-state-meta {
    max-width: 700px;

    margin:
        var(--space-5) auto 0;

    color: var(--color-text-muted);

    font-family: var(--font-mono);
    font-size: var(--text-xs);

    line-height: 1.5;
}


/* ------------------------------------------------------------
   Variants
   ------------------------------------------------------------ */

.message-state--success .message-state-icon {
    background: var(--color-teal);
    color: #111;
}

.message-state--error .message-state-icon {
    background: var(--color-accent);
    color: var(--color-accent-text);
}


/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */

@media (max-width: 520px) {

    .message-state-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .message-state-actions .button {
        width: 100%;
    }
}






/* ============================================================
   22. BREADCRUMBS
   ============================================================ */

.breadcrumbs {
    width: calc(100% - (var(--interface-padding) * 2));

    margin-inline: var(--interface-padding);

    border: var(--border-width) solid var(--color-border);

    background: var(--color-surface-2);
}

.breadcrumbs ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 0;

    margin: 0;
    padding:
        0 clamp(1.25rem, 2vw, 2rem);

    list-style: none;
}

.breadcrumbs li {
    display: inline-flex;
    align-items: center;

    margin: 0;

    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;

    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.breadcrumbs li:not(:last-child)::after {
    content: "•";

    margin-inline: var(--space-3);

    color: var(--color-accent);
}

.breadcrumbs a,
.breadcrumbs [aria-current="page"] {
    display: inline-flex;
    align-items: center;

    min-height: 38px;

    color: var(--color-text);

    text-decoration: none;
}

.breadcrumbs a:hover {
    color: var(--color-accent);
}

.breadcrumbs [aria-current="page"] {
    color: var(--color-text-muted);
}


/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */

@media (max-width: 640px) {

    .breadcrumbs {
        width: calc(100% - (var(--interface-padding) * 2));
    }

    .breadcrumbs ol {
        padding-inline: var(--space-4);
    }

    .breadcrumbs li {
        font-size: 0.68rem;
    }

    .breadcrumbs li:not(:last-child)::after {
        margin-inline: var(--space-2);
    }

    .breadcrumbs a,
    .breadcrumbs [aria-current="page"] {
        min-height: 36px;
    }
}






/* ============================================================
   23. SHARE BAR
   ============================================================ */

.share-bar {
    width: 100%;

    border: var(--border-width) solid var(--color-border);

    background: var(--color-surface);
}


/* ------------------------------------------------------------
   Main row
   ------------------------------------------------------------ */

.share-bar-main {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-4);

    min-height: 58px;

    padding:
        var(--space-2) var(--space-3);
}

.share-bar-label {
    display: flex;
    align-items: center;

    gap: var(--space-3);

    min-width: 0;
}

.share-bar-label-icon {
    display: grid;
    flex: 0 0 auto;

    place-items: center;

    width: 38px;
    height: 38px;

    border: var(--border-width) solid var(--color-border);

    background: var(--color-accent);
    color: var(--color-accent-text);
}

.share-bar-label-copy {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

.share-bar-title {
    color: var(--color-text);

    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 800;

    line-height: 1.2;

    text-transform: uppercase;
}

.share-bar-subtitle {
    margin-top: 2px;

    color: var(--color-text-muted);

    font-family: var(--font-mono);
    font-size: var(--text-xs);

    line-height: 1.3;
}


/* ------------------------------------------------------------
   Actions
   ------------------------------------------------------------ */

.share-actions {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;

    gap: var(--space-2);
}

.share-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: var(--space-2);

    min-height: 38px;

    padding:
        0 var(--space-3);

    border: var(--border-width) solid var(--color-border);

    background: var(--color-surface-2);
    color: var(--color-text);

    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;

    line-height: 1;

    text-decoration: none;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

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

.share-button:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

.share-button i {
    font-size: 0.95rem;
}


/* ------------------------------------------------------------
   Button states
   ------------------------------------------------------------ */

.share-button.is-copied {
    border-color: var(--color-border);

    background: var(--color-teal);
    color: #111;
}

.share-button.is-expanded {
    background: var(--color-surface-2);
    color: var(--color-text);
}

.share-button.is-expanded:hover {
    background: var(--color-accent);
    color: var(--color-accent-text);
}


/* ------------------------------------------------------------
   More panel
   ------------------------------------------------------------ */

.share-more {
    border-top: var(--border-width) solid var(--color-border);

    background: var(--color-surface-2);
}

.share-more[hidden] {
    display: none;
}

.share-more-inner {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: var(--space-2);

    padding: var(--space-3);
}

.share-more .share-button {
    width: 100%;
}


/* ------------------------------------------------------------
   Feedback
   ------------------------------------------------------------ */

.share-feedback {
    padding:
        0 var(--space-3) var(--space-2);

    color: var(--color-text-muted);

    font-family: var(--font-mono);
    font-size: var(--text-xs);

    line-height: 1.4;
}

.share-feedback:empty {
    display: none;
}


/* ------------------------------------------------------------
   Bookmark hint
   ------------------------------------------------------------ */

.share-bookmark {
    display: flex;
    align-items: center;

    gap: var(--space-2);

    padding:
        var(--space-2) var(--space-3);

    border-top: 1px solid var(--color-border-soft);

    color: var(--color-text-muted);

    font-family: var(--font-mono);
    font-size: var(--text-xs);

    line-height: 1.4;
}

.share-bookmark i {
    color: var(--color-accent);
}


/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */

@media (max-width: 760px) {

    .share-bar-main {
        align-items: stretch;
        flex-direction: column;
    }

    .share-actions {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        width: 100%;
    }

    .share-button {
        width: 100%;
    }

    .share-more-inner {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 460px) {

    .share-more-inner {
        grid-template-columns: 1fr;
    }
}








/* ============================================================
   24. FORM STATUS
   ============================================================ */

.form-status {
    display: flex;
    align-items: flex-start;

    gap: var(--space-3);

    margin-bottom: var(--space-5);
    padding: var(--space-3);

    border: var(--border-width) solid var(--color-border);

    background: var(--color-surface-2);
    color: var(--color-text);
}

.form-status[hidden] {
    display: none;
}

.form-status-icon {
    display: grid;
    flex: 0 0 auto;

    place-items: center;

    width: 36px;
    height: 36px;

    border: var(--border-width) solid var(--color-border);

    background: var(--color-accent);
    color: var(--color-accent-text);
}

.form-status-copy {
    min-width: 0;
}

.form-status-title {
    display: block;

    margin-bottom: var(--space-1);

    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 800;

    line-height: 1.2;

    text-transform: uppercase;
}

.form-status-text {
    margin: 0;

    color: var(--color-text-muted);

    font-family: var(--font-mono);
    font-size: var(--text-xs);

    line-height: 1.5;
}


/* ------------------------------------------------------------
   Error
   ------------------------------------------------------------ */

.form-status--error {
    border-left:
        6px solid var(--color-accent);
}


/* ------------------------------------------------------------
   Success
   ------------------------------------------------------------ */

.form-status--success {
    border-left:
        6px solid var(--color-teal);
}

.form-status--success .form-status-icon {
    background: var(--color-teal);
    color: #111;
}