/* ==================================================================
   Field-almanac design language, shared with stats.gazehound.io.
   Tokens are bare RGB triplets composed as rgb(var(--x) / alpha).
   ================================================================== */
@font-face {
    font-family: 'Fraunces';
    src: url('../assets/fonts/fraunces-latin-var.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('../assets/fonts/plex-mono-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('../assets/fonts/plex-mono-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    --paper: 247 245 239;      /* page canvas          #F7F5EF */
    --panel: 232 239 234;      /* hero band, tints     #E8EFEA */
    --surface: 252 251 246;    /* cards, inputs        #FCFBF6 */
    --ink: 43 42 38;           /* text                 #2B2A26 */
    --ink-muted: 110 108 100;  /* captions, labels     #6E6C64 */
    --line: 220 216 204;       /* hairlines            #DCD8CC */
    --line-strong: 201 196 182;/* input borders, thead #C9C4B6 */
    --green: 44 110 73;        /* links                #2C6E49 */
    --green-hi: 31 76 51;      /* link hover           #1F4C33 */
    --rust: 164 74 47;         /* accents, active      #A44A2F */
    --rust-hi: 122 52 34;      /* rust hover           #7A3422 */
    --well: 34 38 31;          /* banner + footer      #22261F */
    --well-ink: 247 245 239;   /* text on the well     #F7F5EF */
}
@media (prefers-color-scheme: dark) {
    :root {
        --paper: 27 25 23;        /* #1B1917 */
        --panel: 35 42 35;        /* #232A23 */
        --surface: 34 31 28;      /* #221F1C */
        --ink: 231 226 214;       /* #E7E2D6 */
        --ink-muted: 165 160 150; /* #A5A096 */
        --line: 53 50 44;         /* #35322C */
        --line-strong: 76 72 64;  /* #4C4840 */
        --green: 133 183 155;     /* #85B79B */
        --green-hi: 169 205 182;  /* #A9CDB6 */
        --rust: 206 134 99;       /* #CE8663 */
        --rust-hi: 224 164 137;   /* #E0A489 */
        --well: 22 21 19;         /* #161513 */
        --well-ink: 231 226 214;  /* #E7E2D6 */
    }
}

/* Base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, figure, table { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    background: rgb(var(--paper));
    color: rgb(var(--ink));
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    -webkit-text-size-adjust: 100%;
}
h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; }
h1 { font-weight: 580; letter-spacing: -0.015em; line-height: 1.1; }
h2 { font-weight: 560; letter-spacing: -0.005em; }
h3 { font-weight: 550; }
@media (prefers-color-scheme: dark) {
    /* Light-on-dark blooms, so display weights back off a step. */
    h1 { font-weight: 540; }
    h2 { font-weight: 520; }
    h3 { font-weight: 515; }
}
strong { font-weight: 600; }
:focus-visible { outline: 2px solid rgb(var(--rust)); outline-offset: 2px; }
a, button, input, select, summary {
    transition: color 180ms, background-color 180ms, border-color 180ms,
        text-decoration-thickness 180ms, transform 120ms;
}
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
    position: fixed; left: 0.75rem; top: 0.75rem; z-index: 100;
    background: rgb(var(--surface)); color: rgb(var(--ink));
    border: 1px solid rgb(var(--line-strong)); padding: 0.55rem 0.9rem;
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
    text-decoration: none; transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* Layout --------------------------------------------------------- */
.wrap { max-width: 1160px; width: 100%; margin-inline: auto; padding-inline: 1rem; }
main#main-content { font-size: 0.9375rem; padding-block: 2.1rem 3.25rem; flex: 1; }
.grid-2 { display: grid; gap: 1.25rem; }
@media (min-width: 768px) {
    .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .span-2 { grid-column: span 2; }
}
.stack-lg > * + * { margin-top: 1.25rem; }
.flow > * + * { margin-top: var(--flow, 0.55rem); }
.flow-sm > * + * { margin-top: 0.45rem; }
.nowrap { white-space: nowrap; }

/* Type ----------------------------------------------------------- */
.section-title {
    font-size: 1.85rem; line-height: 1.15;
    padding-bottom: 0.6rem; margin-bottom: 1.4rem;
    border-bottom: 1px solid rgb(var(--line-strong));
}
.label {
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 500; font-size: 0.6875rem; text-transform: uppercase;
    letter-spacing: 0.08em; color: rgb(var(--ink-muted));
}
.note { font-size: 0.8rem; color: rgb(var(--ink-muted)); }
.warn-text { color: rgb(var(--rust)); font-weight: 600; }
.lnk {
    color: rgb(var(--green)); text-decoration: underline;
    text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.lnk:hover { color: rgb(var(--rust)); text-decoration-thickness: 2px; }
.linklike {
    background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
    color: rgb(var(--green)); text-decoration: underline;
    text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.linklike:hover { color: rgb(var(--rust)); text-decoration-thickness: 2px; }
ul.disc { list-style: disc; padding-left: 1.25rem; }
ul.disc li + li { margin-top: 0.35rem; }
.ic { display: inline-block; vertical-align: -0.125em; flex: none; }

/* Cards ----------------------------------------------------------- */
.card { background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); padding: 1.35rem; }
.card-title {
    font-family: 'Fraunces', Georgia, serif; font-weight: 560;
    font-size: 1.28rem; line-height: 1.25; color: rgb(var(--ink));
    padding-bottom: 0.55rem; margin-bottom: 0.95rem;
    border-bottom: 1px solid rgb(var(--line));
}
@media (prefers-color-scheme: dark) { .card-title { font-weight: 520; } }
.flag { box-shadow: inset 3px 0 0 rgb(var(--rust)); }
.flag .card-title .ic, .card-title .ic { color: rgb(var(--rust)); margin-right: 0.35rem; }

/* Buttons ---------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 500; font-size: 0.75rem; text-transform: uppercase;
    letter-spacing: 0.06em; color: rgb(var(--ink));
    background: rgb(var(--surface)); border: 1px solid rgb(var(--line-strong));
    padding: 0.65rem 1rem; cursor: pointer; user-select: none;
    white-space: nowrap; text-decoration: none;
}
.btn:hover { border-color: rgb(var(--ink)); }
.btn:active { transform: scale(0.98); }
.btn-primary { background: rgb(var(--ink)); border-color: rgb(var(--ink)); color: rgb(var(--paper)); }
.btn-primary:hover { background: rgb(var(--ink) / 0.85); border-color: transparent; }
.btn-sm { padding: 0.45rem 0.7rem; font-size: 0.6875rem; }

/* Tables ----------------------------------------------------------- */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.875rem; }
.tbl th {
    color: rgb(var(--ink-muted));
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 500; font-size: 0.6875rem; text-transform: uppercase;
    letter-spacing: 0.08em; text-align: left; padding: 0.4rem 0.6rem;
    border-bottom: 1px solid rgb(var(--line-strong)); white-space: nowrap;
}
.tbl td { border-bottom: 1px solid rgb(var(--line)); padding: 0.5rem 0.6rem; vertical-align: top; }
.tbl th:first-child, .tbl td:first-child { padding-left: 0; }
.tbl th:last-child, .tbl td:last-child { padding-right: 0; }
.tbl tbody tr { transition: background-color 150ms; }
.tbl tbody tr:hover { background: rgb(var(--panel) / 0.55); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 767.98px) {
    .tbl-wrap {
        --edge: var(--surface);
        background:
            linear-gradient(90deg, rgb(var(--edge)) 40%, rgb(var(--edge) / 0)) left/48px 100%,
            linear-gradient(270deg, rgb(var(--edge)) 40%, rgb(var(--edge) / 0)) right/48px 100%,
            linear-gradient(90deg, rgb(var(--ink) / 0.10), rgb(var(--ink) / 0)) left/16px 100%,
            linear-gradient(270deg, rgb(var(--ink) / 0.10), rgb(var(--ink) / 0)) right/16px 100%;
        background-repeat: no-repeat;
        background-attachment: local, local, scroll, scroll;
    }
}
.trophy-names td:nth-child(n+2) { font-weight: 600; color: rgb(var(--ink)); }
.donation-items td:first-child { font-weight: 600; color: rgb(var(--ink)); }

/* Forms ------------------------------------------------------------ */
.field {
    background: rgb(var(--surface)); border: 1px solid rgb(var(--line-strong));
    color: rgb(var(--ink)); padding: 0.35rem 0.5rem; font: inherit;
    text-align: right; font-variant-numeric: tabular-nums;
}
.field:focus { border-color: rgb(var(--ink)); outline: none; }
.w-qty { width: 4rem; }
.select-wrap { position: relative; }
.select {
    appearance: none; width: 100%; font: inherit; font-size: 0.875rem;
    background: rgb(var(--surface)); border: 1px solid rgb(var(--line-strong));
    color: rgb(var(--ink)); padding: 0.6rem 2.2rem 0.6rem 0.75rem;
}
.select:focus { border-color: rgb(var(--ink)); outline: none; }
.select-wrap .ic {
    position: absolute; right: 0.65rem; top: 50%; translate: 0 -50%;
    pointer-events: none; color: rgb(var(--ink-muted));
}

/* Notice band + hero ---------------------------------------------- */
.notice {
    background: rgb(var(--well)); color: rgb(var(--well-ink) / 0.92);
    font-size: 0.8125rem; padding: 0.55rem 1rem; text-align: center;
}
.notice strong { color: rgb(var(--well-ink)); }
.notice a {
    color: rgb(var(--well-ink)); text-decoration: underline;
    text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.notice a:hover { text-decoration-thickness: 2px; }
.hero-band { background: rgb(var(--panel)); border-bottom: 1px solid rgb(var(--line)); }
.hero { display: grid; gap: 1.75rem; padding-block: 2.4rem 2.6rem; align-items: center; }
@media (min-width: 920px) {
    .hero { grid-template-columns: minmax(0, 6.5fr) minmax(0, 5.5fr); gap: 3rem; padding-block: 3rem 3.25rem; }
}
.eyebrow {
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 500; font-size: 0.71rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: rgb(var(--rust)); margin-bottom: 0.8rem;
}
.hero-title { font-size: clamp(2.15rem, 4.6vw, 3.3rem); text-wrap: balance; }
.hero-meta { margin-top: 1.15rem; }
.hero-meta p { display: flex; align-items: center; gap: 0.55rem; margin-top: 0.35rem; font-size: 0.95rem; }
.hero-meta .ic { color: rgb(var(--rust)); }
.hero-deadline {
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem; letter-spacing: 0.02em; margin-top: 0.7rem;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.5rem; }
.hero-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid rgb(var(--line-strong)); }
.hero-photo figcaption { margin-top: 0.45rem; text-align: right; }

/* Section nav ------------------------------------------------------ */
#tab-nav, #sec-nav {
    position: sticky; top: 0; z-index: 40;
    background: rgb(var(--paper)); border-bottom: 1px solid rgb(var(--line));
}
.nav-mobile { padding-block: 0.6rem; }
.nav-links { display: none; }
@media (min-width: 640px) {
    .nav-mobile { display: none; }
    .nav-links {
        display: flex; overflow-x: auto; scrollbar-width: none;
        --edge: var(--paper);
        background:
            linear-gradient(90deg, rgb(var(--edge)) 40%, rgb(var(--edge) / 0)) left/40px 100%,
            linear-gradient(270deg, rgb(var(--edge)) 40%, rgb(var(--edge) / 0)) right/40px 100%,
            linear-gradient(90deg, rgb(var(--ink) / 0.10), rgb(var(--ink) / 0)) left/14px 100%,
            linear-gradient(270deg, rgb(var(--ink) / 0.10), rgb(var(--ink) / 0)) right/14px 100%;
        background-repeat: no-repeat;
        background-attachment: local, local, scroll, scroll;
    }
    .nav-links::-webkit-scrollbar { display: none; }
}
.sec-link {
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 500; font-size: 0.71rem; text-transform: uppercase;
    letter-spacing: 0.07em; color: rgb(var(--ink-muted));
    padding: 0.95rem 0.7rem 0.85rem; border-bottom: 2px solid transparent;
    white-space: nowrap; text-decoration: none;
}
.sec-link:hover { color: rgb(var(--ink)); }
.sec-link:focus-visible { outline-offset: -2px; }
.sec-link[aria-current="true"] { color: rgb(var(--ink)); border-bottom-color: rgb(var(--rust)); }

/* Sections --------------------------------------------------------- */
/* One section shows at a time, like tabs. Inactive ones stay in the
   document as hidden="until-found" so browser find-in-page can still
   reach them and auto-reveal the right section. The UA default
   [hidden]{display:none} would defeat that, so restore it here.
   Browsers without until-found support fall back to ordinary hiding. */
section[hidden="until-found"] { display: block; content-visibility: hidden; }
.guide-section { scroll-margin-top: calc(var(--nav-h, 4rem) + 1rem); }
@media (prefers-reduced-motion: no-preference) {
    @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
    .guide-section:not([hidden]) { animation: rise 0.28s cubic-bezier(0.16, 1, 0.3, 1); }
}

/* Fee calculator --------------------------------------------------- */
.fee-group { padding-block: 0.85rem; }
.fee-group + .fee-group { border-top: 1px solid rgb(var(--line)); }
.fee-group > .label { display: block; margin-bottom: 0.55rem; }
.fee-row { display: flex; align-items: center; gap: 0.75rem; }
.fee-row > span:first-child { flex: 1; min-width: 0; }
.fee-hint { font-size: 0.75rem; color: rgb(var(--ink-muted)); }
.fee-line { width: 6rem; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fee-total-bar {
    margin-top: 1.1rem; display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 0.75rem;
    border: 1px solid rgb(var(--line-strong)); background: rgb(var(--panel));
    padding: 0.9rem 1rem;
}
.fee-total-value {
    font-family: 'Fraunces', Georgia, serif; font-weight: 560; font-size: 1.9rem;
    line-height: 1; color: rgb(var(--rust));
    font-variant-numeric: lining-nums tabular-nums;
}

/* Quick links ------------------------------------------------------ */
.qgrid { display: grid; gap: 0.9rem; }
@media (min-width: 640px) { .qgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qlink {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 0.8rem;
    border: 1px solid rgb(var(--line)); background: rgb(var(--surface));
    padding: 0.95rem 1rem; text-decoration: none; color: inherit;
}
.qlink:hover { border-color: rgb(var(--ink-muted)); background: rgb(var(--panel) / 0.5); }
.qlink-title { font-weight: 600; color: rgb(var(--ink)); font-size: 0.9rem; }
.qlink .note { display: block; margin-top: 0.15rem; }
.qlink .ic { color: rgb(var(--rust)); margin-top: 0.2rem; }

/* Rosette dots ----------------------------------------------------- */
.dot {
    display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%;
    border: 1px solid rgb(var(--line-strong)); vertical-align: -0.06em; margin-right: 0.45rem;
}
.dot-list li + li { margin-top: 0.35rem; }

/* Disclosures ------------------------------------------------------ */
.disclosure > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 0.5rem; }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary .chev { transition: transform 0.2s ease; color: rgb(var(--ink-muted)); }
.disclosure[open] > summary .chev { transform: rotate(180deg); }
.disclosure > summary.card-title { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

/* Footer well ------------------------------------------------------ */
.well { background: rgb(var(--well)); color: rgb(var(--well-ink) / 0.9); padding-block: 2.5rem; margin-top: auto; }
.well a {
    color: rgb(var(--well-ink)); text-decoration: underline;
    text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.well a:hover { color: rgb(var(--rust-hi)); }
@media (prefers-color-scheme: light) { .well a:hover { color: rgb(224 164 137); } }
.foot-nav {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin-bottom: 1.9rem;
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 500; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.foot-nav a { text-decoration: none; display: inline-flex; align-items: center; gap: 0.45rem; }
.foot-nav a:hover { text-decoration: underline; }
#disclaimer { max-width: 56rem; margin-inline: auto; font-size: 0.875rem; line-height: 1.65; scroll-margin-top: 7rem; }
#disclaimer .flow > * + * { margin-top: 0.8rem; }
#disclaimer strong { color: rgb(var(--well-ink)); }
.foot-fine { font-size: 0.75rem; }
.foot-fine > * + * { margin-top: 0.6rem; }
.foot-meta {
    margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid rgb(var(--well-ink) / 0.14);
    text-align: center; font-size: 0.75rem; color: rgb(var(--well-ink) / 0.7);
}
.foot-meta a { color: rgb(var(--well-ink) / 0.85); }
.foot-meta .brandline { margin-top: 0.4rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.4rem 1rem; }
.foot-meta .brandline a { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; }
.foot-meta .brandline a:hover { text-decoration: underline; }

/* Motion preference ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, ::before, ::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Print ------------------------------------------------------------ */
@media print {
    :root {
        --paper: 255 255 255; --panel: 255 255 255; --surface: 255 255 255;
        --ink: 0 0 0; --ink-muted: 85 85 85;
        --line: 187 187 187; --line-strong: 153 153 153;
        --green: 0 0 0; --rust: 0 0 0;
        --well: 255 255 255; --well-ink: 0 0 0;
    }
    body { display: block; }
    .no-print, #tab-nav, .hero-photo, .btn, .skip-link { display: none !important; }
    .notice { border-bottom: 1px solid #000; }
    .well { border-top: 1px solid #000; }
    /* Print the whole guide, including sections currently hidden */
    section[hidden] { display: block !important; content-visibility: visible !important; }
    .guide-section { break-inside: auto; animation: none !important; }
    .section-title { break-after: avoid; }
    .card { break-inside: avoid; }
}

/* First-timers call-out bar ---------------------------------------- */
.callout {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 0.8rem 1rem;
    margin-bottom: 1.5rem;
}
.callout p { font-size: 0.9375rem; }

/* Image plates and partner logo tiles ------------------------------- */
.img-plate { border: 1px solid rgb(var(--line)); }
.logo-tile {
    display: block; background: #FFFFFF;
    border: 1px solid rgb(var(--line)); padding: 0.75rem;
}
.logo-tile:hover { border-color: rgb(var(--ink-muted)); }
.logo-tile img { width: 100%; height: auto; }

/* Awards pairing: two cards side by side on wide screens ------------ */
.grid-2-lg { display: grid; gap: 1.25rem; }
@media (min-width: 1024px) { .grid-2-lg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cols-rosette { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .cols-rosette { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cols-rosette { grid-template-columns: 1fr; } }

/* Footer share row --------------------------------------------------- */
.share-wrap { text-align: center; margin-bottom: 1.9rem; }
.share-wrap .label { color: rgb(var(--well-ink) / 0.7); display: block; margin-bottom: 0.7rem; }
.share-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.share-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 500; font-size: 0.7rem; text-transform: uppercase;
    letter-spacing: 0.06em; color: rgb(var(--well-ink));
    background: rgb(var(--well-ink) / 0.08); border: 1px solid rgb(var(--well-ink) / 0.25);
    padding: 0.5rem 0.8rem; cursor: pointer; user-select: none;
    white-space: nowrap; text-decoration: none;
}
.share-btn:hover { background: rgb(var(--well-ink) / 0.16); border-color: rgb(var(--well-ink) / 0.5); }
.share-btn:active { transform: scale(0.98); }
footer .share-btn { text-decoration: none; }

/* Long-form pages (first-timers): stacked sections, scroll-spy nav --- */
.page-sections .guide-section + .guide-section { margin-top: 2.75rem; }
.lede { font-size: 1.05rem; max-width: 44rem; }

/* Scroll-spy nav variant: link row at every width (no dropdown page) */
.nav-links--all {
    display: flex; overflow-x: auto; scrollbar-width: none;
    --edge: var(--paper);
    background:
        linear-gradient(90deg, rgb(var(--edge)) 40%, rgb(var(--edge) / 0)) left/40px 100%,
        linear-gradient(270deg, rgb(var(--edge)) 40%, rgb(var(--edge) / 0)) right/40px 100%,
        linear-gradient(90deg, rgb(var(--ink) / 0.10), rgb(var(--ink) / 0)) left/14px 100%,
        linear-gradient(270deg, rgb(var(--ink) / 0.10), rgb(var(--ink) / 0)) right/14px 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
}
.nav-links--all::-webkit-scrollbar { display: none; }