* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* THE background knob — body, hero fade gradients, glass panels and the
       neural-bg.js canvas overlays all derive from this one variable
       (canvas reads it at runtime via getComputedStyle). */
    --bg: #121212;
    --bg2: var(--bg);
    --card-bg: rgba(255,240,222,0.04);
    --card-hover: rgba(255,240,222,0.07);
    --text: #c3c2b7;
    --text-secondary: rgba(255,240,222,0.55);
    --text-muted: #6c6c6c;
    --text-faint: rgba(255,240,222,0.22);
    --accent: #34d399;
    --search-bg: rgba(255,240,222,0.04);
    --search-border: rgba(255,240,222,0.07);
    --search-border-focus: rgba(255,240,222,0.15);
    --search-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 4px 18px rgba(0,0,0,0.5);
    --search-shadow-focus: 0 1px 4px rgba(0,0,0,0.5), 0 8px 30px rgba(0,0,0,0.6);
    --divider: rgba(255,240,222,0.08);
    --footer-border: rgba(255,240,222,0.06);
    --pagination-border: rgba(255,240,222,0.08);
    --pagination-hover-bg: rgba(255,240,222,0.06);
    --pagination-hover-border: rgba(255,240,222,0.12);
    --pagination-hover-text: #f5f5f7;
    --logo-shadow: 0px 2px 6px rgba(0,0,0,.4);
    --logo-shadow-hover: 0px 4px 12px rgba(0,0,0,.5);
    --logo-filter: opacity(1);
    --logo-filter-hover: opacity(1);
    --job-title-color: #f5f5f7;
    --job-location-color: var(--text-muted);
    --star-color: var(--text-muted);
}

/* Reserve the scrollbar gutter so result-count changes between searches
   don't toggle the scrollbar and visibly resize the whole layout. */
html {
    scrollbar-gutter: stable;
    overflow-y: scroll;
}

body {
    font-family: 'DM Sans', sans-serif;
    background-color: var(--bg2);
    color: var(--text);
    line-height: 1.5;
    /* Sticky-footer layout: while the job list loads (grid empty), the main
       column stretches so the footer stays below the fold instead of
       flashing up into view and jumping back down once jobs render. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* The stretchable middle: the job-feed column grows, footer pins to the
   bottom. Hero keeps its natural height. */
#main-container {
    flex-grow: 1;
}


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

.site-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 380px;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

/* HERO SECTION WITH SMOOTH TRANSITION (NO BLUR) */
#hero {
    position: relative;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 72px 0 20px;
    transition: background-color 0.2s;
}




.hero-content {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 600px;
    text-align: center;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-top: 0;
    overflow: visible;
}

#logo {
    margin-top: -8px;
    margin-bottom: -4px;
    overflow: visible;
    width: 100%;
}

#logo a {
    display: block;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.logo-text {
    display: inline-block;
    position: relative;
    z-index: 1;
    margin-bottom: -11px;
    line-height: 0;
}

.logo-text img {
    display: block;
    width: 200px;
    height: 74px;
    -webkit-user-drag: none;
    filter:
        drop-shadow(0 4px 12px rgba(0,0,0,0.4))
        drop-shadow(0 1px 2px rgba(255,240,222,0.1));
}

@media (min-width: 1101px) {
    #logo { margin-bottom: -9px; }
    .logo-text { margin-bottom: -24px; }
    .logo-text img {
        width: 225px;
        height: 83.3px;
        -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
    }
    .search-box {
        box-shadow:
            inset 0 1px 0 rgba(255,240,222,0.06),
            0 -8px 12px rgba(0,0,0,0.92),
            0 -28px 48px rgba(0,0,0,0.84),
            0 -46px 64px rgba(0,0,0,0.42),
            0 3px 12px rgba(0,0,0,0.38);
    }
}

#search-container {
    position: relative;
    z-index: 100;
    width: 80%;
}

.search-box {
    /* liquid glass: neutral dark base, frosted (restored from 2cdf1c5a~1) */
    background:
        linear-gradient(180deg, rgba(255,240,222,0.05) 0%, rgba(255,240,222,0.01) 55%),
        rgba(14, 14, 14, 0.82);
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    border-radius: 20px;
    border: none;
    box-shadow: inset 0 1px 0 rgba(255, 240, 222, 0.06), 0 2px 8px rgba(0,0,0,0.3);


    display: flex;
    align-items: center;
    padding: 8px 20px 8px 24px;
    margin-bottom: 14px;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}


.search-box:focus-within {
    background:
        linear-gradient(180deg, rgba(255,240,222,0.07) 0%, rgba(255,240,222,0.01) 55%),
        rgba(10, 10, 10, 0.88);
}

.search-icon {
    display: flex;
    align-items: center;
    margin-right: 16px;
    flex-shrink: 0;
    color: #a39d92;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), filter 0.25s ease;
}

.search-icon-mobile { display: none; }


/* Tagline under the search bar */
.hero-tagline {
    margin: 2px 0 0;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--text-secondary);
}

.hero-tagline strong {
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    font-size: 19px;
    color: var(--text);
    padding: 10px 0;
    font-family: inherit;
    background: transparent;
}

.search-input::placeholder {
    color: rgba(244,238,228,0.48);
}

.search-box.has-pills .search-input::placeholder {
    color: transparent;
}

.search-clear {
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255,240,222,0.10);
    border: none;
    padding: 4px;
    margin-right: 4px;
    color: #f6f1e8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.search-clear:hover {
    color: #f6f1e8;
    background: rgba(255,240,222,0.18);
}

#active-filters {
    flex-shrink: 0;
    white-space: nowrap;
    margin-right: 2px;
    font-size: 19px;
    color: var(--text);
}
#active-filters:empty { display: none; }

/* Active filters render as plain typed-looking text (e.g. "software, remote,").
   Each term stays clickable to remove it; the commas are inert separators. */
.filter-text {
    color: var(--accent);
    cursor: pointer;
}
.filter-text:hover {
    text-decoration: line-through;
}
.filter-comma {
    color: var(--text);
    cursor: default;
}

.quick-searches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin-top: 14px;
    width: 900px;
    max-width: 90vw;
}

.qs-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 15px 7px 12px;
    background: rgba(255,240,222,0.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,240,222,0.09);
    border-radius: 100px;
    color: rgba(244,238,228,0.61);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.qs-chip svg {
    opacity: 0.7;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}

.qs-chip:hover {
    background: rgba(255,240,222,0.07);
    color: rgba(244,238,228,0.79);
    border-color: rgba(255,240,222,0.13);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

.qs-chip:hover svg {
    opacity: 0.85;
}

.qs-chip:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Selected chip — lit with the accent so the active one reads at a glance.
   Single selection: clicking another chip swaps; clicking the active one clears. */
.qs-chip.active {
    background: rgba(155,139,245,0.16);
    border-color: rgba(155,139,245,0.45);
    color: #f6f1e8;
    position: relative;
}

.qs-chip.active svg {
    opacity: 1;
}

/* The extra role categories live in a small glass menu beside the hero chips. */
.qs-more { display: inline-flex; }

.qs-more-trigger {
    justify-content: center;
    padding: 7px 11px;
    color: rgba(215,207,255,0.82);
    background: rgba(155,139,245,0.07);
    border-color: rgba(155,139,245,0.22);
}

.qs-more-trigger:hover,
.qs-more-trigger.open {
    color: #f4f1ff;
    background: rgba(155,139,245,0.16);
    border-color: rgba(155,139,245,0.42);
    box-shadow: 0 5px 20px rgba(0,0,0,0.28);
}

.qs-more-trigger.active {
    border-color: rgba(155,139,245,0.55);
}

.qs-more-trigger .qs-more-plus {
    opacity: 1;
    transition: transform 0.24s cubic-bezier(0.34,1.56,0.64,1);
}

.qs-more-trigger.open .qs-more-plus { transform: rotate(45deg); }

.qs-more-menu {
    position: fixed;
    z-index: 300;
    width: 264px;
    padding: 7px;
    overflow-y: auto;
    overscroll-behavior: contain;
    color: #f0ebe1;
    background: linear-gradient(160deg, rgba(255,240,222,0.07), transparent 55%), rgba(19,19,22,0.96);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border: 1px solid rgba(255,240,222,0.12);
    border-radius: 15px;
    box-shadow: 0 20px 48px rgba(0,0,0,0.52), inset 0 1px rgba(255,240,222,0.06);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-7px) scale(0.96);
    transform-origin: var(--qs-more-origin, 50%) top;
    transition: opacity 0.16s ease, transform 0.23s cubic-bezier(0.16,1,0.3,1), visibility 0.16s;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,240,222,0.16) transparent;
}

.qs-more-menu.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.qs-more-option {
    display: grid;
    grid-template-columns: 18px minmax(0,1fr) 14px;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 38px;
    padding: 5px 9px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: rgba(244,238,228,0.76);
    font: 500 12px 'DM Sans', sans-serif;
    text-align: left;
    cursor: pointer;
    transition: color 0.16s ease, background 0.16s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1);
}

.qs-more-option:hover,
.qs-more-option:focus-visible {
    color: #f6f1e8;
    background: rgba(255,240,222,0.065);
    transform: translateX(2px);
    outline: none;
}

.qs-more-option[aria-checked="true"] {
    color: #f6f1e8;
    background: rgba(155,139,245,0.13);
}

.qs-more-icon {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    color: var(--qs-more-color);
    transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}

.qs-more-option:hover .qs-more-icon,
.qs-more-option:focus-visible .qs-more-icon {
    transform: scale(1.08);
}

.qs-more-check {
    width: 13px;
    height: 13px;
    color: #b9aaff;
    opacity: 0;
    transform: scale(0.65);
    transition: opacity 0.16s ease, transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}

.qs-more-option[aria-checked="true"] .qs-more-check { opacity: 1; transform: scale(1); }

@media (max-width: 600px) {
    .qs-more-trigger { justify-content: center; width: 32px; height: 29px; padding: 0; }
    .qs-more-menu { width: min(264px, calc(100vw - 24px)); }
}

@media (prefers-reduced-motion: reduce) {
    .qs-more-trigger .qs-more-plus,
    .qs-more-menu,
    .qs-more-option,
    .qs-more-icon,
    .qs-more-check { transition-duration: 0.01ms; }
}

/* Live-scraper toggle (quick-searches row) */
.qs-toggle { gap: 8px !important; cursor: pointer; }
.qs-toggle-track { width: 34px; height: 18px; background: rgba(255,240,222,0.08); border-radius: 100px; position: relative; flex-shrink: 0; transition: background 0.2s ease; }
.qs-toggle-thumb { width: 14px; height: 14px; background: rgba(255,240,222,0.35); border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), background 0.2s ease; }
.qs-toggle.active .qs-toggle-track { background: #22d3ee; }
.qs-toggle.active .qs-toggle-thumb { transform: translateX(16px); background: #fff; }

/* MAIN CONTAINER */

#main-container {
    margin: 10px auto 0;
    padding: 0 30px;
    position: relative;
    z-index: 2;
}

@media (min-width: 1101px) {
    #main-container {
        width: min(55vw, 900px);
    }
    .search-box { padding-top: 9px; padding-bottom: 9px; }
}

.content-layout {
    padding-top: 0;
}

.jobs-column {
    min-width: 0;
    position: relative;
}
.jobs-column::before {
    display: none;
    content: '';
    position: absolute;
    top: 0;
    left: -30px;
    right: -10px;
    height: 90px;
    background: linear-gradient(to bottom, var(--bg) 0%, transparent 100%);
    pointer-events: none;
    z-index: 10;
}

/* Hide stats bar and footer during loading mode */
body.is-loading #stats-bar,
body.is-loading .footer-seo {
    display: none !important;
}

.stats-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 12px;
    padding-left: 20px;
    position: relative;
    z-index: 11;
}

#stats-text {
    display: inline;
}

/* Start page: the "X jobs" count is noise on the landing view — hide it there
   on mobile. On desktop there's room, so keep it visible. */
#stats-text.default-view {
    visibility: hidden;
}
@media (min-width: 641px) {
    #stats-text.default-view {
        visibility: visible;
    }
}

.stat-count {
    font-weight: 600;
    color: var(--text-secondary);
}

.stat-plus {
    font-size: 0.85em;
    font-weight: 500;
    color: rgba(244,238,228,0.51);
    margin-left: 1px;
}

/* Transitions.dev — Number pop-in (digits of .stat-count stagger in).
   Replay: rebuild the digits fresh with .is-animating on the group. */
:root {
    --digit-dur: 300ms;
    --digit-distance: 8px;
    --digit-stagger: 50ms;
    --digit-blur: 2px;
    --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
    --digit-dir-x: 0;
    --digit-dir-y: 1;
}

@keyframes t-digit-pop-in {
    0% {
        transform: translate(
            calc(var(--digit-distance) * var(--digit-dir-x)),
            calc(var(--digit-distance) * var(--digit-dir-y))
        );
        opacity: 0;
        filter: blur(var(--digit-blur));
    }
    100% { transform: translate(0, 0); opacity: 1; filter: blur(0); }
}

.t-digit-group {
    display: inline-flex;
    align-items: baseline;
}
.t-digit {
    display: inline-block;
    will-change: transform, opacity, filter;
}
/* Thousand-group separator in the number pop-in ("225 000"): fixed-width box,
   so the count looks identical regardless of font metrics for the space. */
.t-sep {
    display: inline-block;
    width: 0.4em;
    overflow: hidden;
}
.t-digit-group.is-animating .t-digit {
    animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both;
}
/* Generic stagger: --digit-n comes inline from statCountHtml() in main.js */
.t-digit-group.is-animating .t-digit[data-stagger] {
    animation-delay: calc(var(--digit-stagger) * var(--digit-n));
}

@media (prefers-reduced-motion: reduce) {
    .t-digit-group .t-digit { animation: none !important; }
}


/* The "+" joining a chip and a manual search in the stats echo
   ("20 jobs for ⚡ Software + react"). */
.search-time {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 4px;
    display: none;
}
@media (min-width: 641px) {
    .search-time { display: inline; }
}

/* ── Loading: ASCII shimmer grid ──────────────────────────────────────────
   A tiny generative character field (5×10) replaces the spinner: glyphs pan
   diagonally through a light→dense ramp, reading as a scan sweep. Rendered
   by a single rAF chain in main.js (startAsciiLoader). Monochrome, no
   colors. */
.ascii-loader {
    display: block;
    width: fit-content;
    margin: 46px auto 0;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 11px;
    line-height: 1.6;
    letter-spacing: 0.35em;
    color: rgba(244,238,228,0.76);
    text-align: center;
    white-space: pre;
    user-select: none;
}

/* JOB GRID */

.job-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px 32px;
    padding-left: 4px;
    padding-right: 4px;
}

/* ── Stats-bar controls ─────────────────────────────────────────────────────
   The sort dropdown lives here (#sort-dd). */
.stats-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 12px;
}

.stats-tip {
    color: rgba(244,238,228,0.36);
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 10.5px;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.sort-dd {
    display: none;
}

/* Custom sort dropdown — springy chevron, pop-open menu, sliding checkmarks,
   cyan "non-default" dot on the trigger. */
.sort-dd {
    position: relative;
}

.sort-dd-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 9px 0 10px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(244,238,228,0.64);
    background-color: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}

.sort-dd-btn:hover {
    color: rgba(244,238,228,0.84);
    background-color: rgba(255,240,222,0.05);
}

.sort-dd-btn:active { transform: scale(0.96); }
.sort-dd-btn:focus-visible { outline: none; color: #22d3ee; }

.sort-dd.open .sort-dd-btn {
    color: rgba(244,238,228,0.96);
    background-color: rgba(255,240,222,0.07);
}

/* Cyan dot — appears only while a non-default sort is active (closed state cue). */
.sort-dd-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #22d3ee;
    transform: scale(0);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}

.sort-dd-btn:not([data-value="recent"]) .sort-dd-dot {
    transform: scale(1);
    opacity: 1;
}

.sort-dd-chev {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sort-dd.open .sort-dd-chev { transform: rotate(180deg); }

.sort-dd-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    min-width: 138px;
    padding: 4px;
    background: rgba(17,18,22,0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,240,222,0.09);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.45);
    opacity: 0;
    transform: scale(0.92) translateY(-6px);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sort-dd.open .sort-dd-menu {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

.sort-dd-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 6px 10px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 500;
    text-align: left;
    color: rgba(244,238,228,0.74);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.13s ease, color 0.13s ease, padding-left 0.13s ease;
}

.sort-dd-opt:hover {
    color: rgba(244,238,228,0.98);
    background-color: rgba(255,240,222,0.06);
    padding-left: 13px;
}

.sort-dd-opt:focus-visible { outline: none; color: #f6f1e8; background-color: rgba(255,240,222,0.08); }

.sort-dd-opt svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    color: #22d3ee;
    opacity: 0;
    transform: translateX(-4px) scale(0.6);
    transition: opacity 0.18s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sort-dd-opt.selected { color: rgba(244,238,228,0.98); }

.sort-dd-opt.selected svg {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.job-card {
    font-family: 'DM Sans', sans-serif;
    border: 1px solid rgba(255,240,222,0.075);
    border-radius: 20px;
    padding: 16px 20px;
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.25s ease;
    min-width: 0;
    /* Perf note: `content-visibility: auto` was tried here and REVERTED — it
       implies paint containment, which clips anything painted outside the
       card's border box, i.e. the hanging company logo. `contain: layout
       style` keeps the layout-isolation half of the win with no clipping. */
    contain: layout style;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.job-card-label {
    position: absolute;
    bottom: -10px;
    right: 24px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg, #0a0a0f);
    color: rgba(244,238,228,0.61);
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0 10px;
    line-height: 20px;
    border-radius: 3px;
    pointer-events: none;
    z-index: 2;
}

.job-card-label-icon {
    position: relative;
    top: -1px;
    display: block;
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    shape-rendering: geometricPrecision;
    opacity: 0.85;
}

/* Flat cards: no fill at rest or on hover — hover only lights up the
   border (plus the gentle lift). */
.job-card:hover {
    background: transparent;
    border-color: rgba(255,240,222,0.28);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.job-card:hover .job-card-label {
    color: var(--text, #e8e8ed);
}

.job-card-time {
    position: absolute;
    top: -10px;
    right: 24px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg, #0a0a0f);
    color: hsl(135, 59%, 61%);
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0 10px;
    line-height: 20px;
    border-radius: 3px;
    pointer-events: none;
    z-index: 2;
}

.job-logo-wrapper {
    width: 38px;
    height: 38px;
    background: transparent;
    padding: 0px;
    border-radius: 14px;
    box-shadow: var(--logo-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.25s ease;
    flex-shrink: 0;
    /* Straddles the card's left border dead-center: pulled left by the
       card's 20px padding plus half the 38px wrapper. */
    margin-left: -39px;
    margin-right: 18px;
}

.job-logo-wrapper:hover {
    box-shadow: var(--logo-shadow-hover);
    transform: scale(1.25) rotate(-2deg);
}

.job-logo {
    width: 78%;
    height: 78%;
    object-fit: contain;
    border-radius: 10px;
}

.job-info {
    flex: 1;
    margin-left: 0;
    min-width: 0;
}

.job-title-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
}

.job-title-row .job-title {
    flex: 1;
    min-width: 0;
}

.job-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 0;
    margin-bottom: 8px;
}

.job-company-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    border-radius: 4px;
    opacity: 0.85;
}

.job-ago {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: rgba(244,238,228,0.56);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
}

.job-ago-icon {
    position: relative;
    top: -1px;
    display: block;
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    shape-rendering: geometricPrecision;
    opacity: 0.78;
}

.job-dot {
    display: block;
    width: 3px;
    height: 3px;
    flex: 0 0 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.55;
}

.job-company {
    display: inline-block;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(244,238,228,0.68);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
    flex-shrink: 0;
}

.job-location {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: rgba(244,238,228,0.56);
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.job-location-icon {
    position: relative;
    top: -1px;
    display: block;
    width: 11px;
    height: 11px;
    flex: 0 0 11px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    shape-rendering: geometricPrecision;
    opacity: 0.78;
}

.job-location-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Highlighted query words in result cards. Tinted with the theme accent and a
   faint background instead of the default jarring yellow; box-decoration-break
   keeps the pill intact when a long title wraps. */
mark.hl {
    background: color-mix(in srgb, var(--accent) 35%, transparent);
    color: #f6f1e8;
    border-radius: 4px;
    padding: 0 2px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.job-title {
    font-family: inherit;
    font-size: 18.5px;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.018em;
    line-height: 1.3;
    margin: 0;
    transition: color 0.2s ease;
    /* Keep long titles on one line so they never reach the Apply button —
       ellipsis instead of wrapping. On mobile the Apply button is hidden and
       titles can wrap naturally, so truncation is scoped to desktop only. */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.job-card:hover .job-title {
    color: #f6f1e8;
}

@media (max-width: 640px) {
    .job-title {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}

@media (min-width: 1101px) {
    .job-info {
        display: flex;
        flex-direction: column;
    }
    .job-title-row { order: 1; }
    .job-title {
        font-size: 18.5px;
        line-height: 1.25;
        position: relative;
        top: 1px;
        max-width: 30ch;
    }
    .job-card-header {
        order: 2;
        line-height: 1.2;
        margin-top: 9px;
        margin-bottom: 0;
    }
    .job-card { padding-top: 15px; padding-bottom: 15px; }
}

.job-new {
    display: inline-block;
    flex-shrink: 0;
    color: #4ade80;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1;
}

.job-new::before {
    content: "· ";
    margin-right: 4px;
    color: rgba(255,240,222,0.15);
}

/* Compensation — inline in the card header, right before the time-ago chip.
   Small muted style matching the header metadata row. */
.job-card-header .job-salary {
    color: rgba(244,238,228,0.46);
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 0.01em;
    white-space: nowrap;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.job-card-header .job-salary::before {
    content: "· ";
    margin-right: 4px;
    color: rgba(255,240,222,0.15);
}

@media (min-width: 641px) {
    .job-card-header > .job-salary { display: none; }
    .job-title-row .job-title { flex: 0 1 auto; }
}

.job-salary.nd {
    color: rgba(244,238,228,0.52);
    font-weight: 500;
    font-size: 12px;
}

/* Estimates: inline "est" suffix — no floating tag needed. */
.est-mark {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    color: rgba(244,238,228,0.54);
    margin-left: 2px;
}

/* Right side of the card: ghost Apply button, visible on hover. */
.job-cta {
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    align-items: center;
}
.job-apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 19px;
    border: 1px solid rgba(255,240,222,0.13);
    border-radius: 9px;
    color: rgba(244,238,228,0.68);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: border-color .2s ease, color .2s ease;
}
.job-apply-salary {
    display: inline-flex;
    align-items: center;
    margin-left: 18px;
    padding-left: 0;
    border-left: 0;
}
.job-apply .job-salary {
    color: inherit;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.job-apply .job-salary::before { content: none; }
.job-apply .job-salary.nd { font-size: 11px; }
.job-apply:hover {
    border-color: rgba(255,240,222,0.30);
    color: #f6f1e8;
}
.job-apply:active {
    border-color: rgba(255,240,222,0.20);
    color: rgba(244,238,228,0.86);
}


/* LIVE PILL — floating "+N new jobs" indicator that suggests live scraping */

.job-grid-wrap {
    position: relative;
}


.live-pill {
    position: absolute;
    top: -50px;
    left: 50%;
    z-index: 50;
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 8px 18px 8px 14px;
    background: rgba(28, 28, 28, 0.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: none;
    border-radius: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 16px);
    pointer-events: none;
    transition:
        opacity 0.3s ease,
        transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1),
        background 0.2s ease;
}

.live-pill.visible {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.live-pill:hover {
    background: rgba(36, 36, 36, 0.95);
}

.live-pill-logos {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.live-pill-logo {
    width: 42px;
    height: 42px;
    border-radius: 18px;
    background: #2a2a2a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    margin-right: -16px;
    opacity: 0;
    transform: translateY(4px) scale(0.85);
    animation: liveLogoIn 0.4s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}
.live-pill-logo:nth-child(1) { animation-delay: 0.05s; }
.live-pill-logo:nth-child(2) { animation-delay: 0.15s; }
.live-pill-logo:nth-child(3) { animation-delay: 0.25s; z-index: 0; }
.live-pill-logo:last-child  { margin-right: 0; }

.live-pill-logo img {
    width: 78%;
    height: 78%;
    object-fit: contain;
    border-radius: 14px;
}

@keyframes liveLogoIn {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.live-pill-text {
    font-size: 12.5px;
    font-weight: 600;
    color: #c9c3b8;
    margin-left: 16px;
    letter-spacing: 0.01em;
}

/* PAGINATION */

.pagination {
    margin-top: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.pag-btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--pagination-border);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.pag-btn:hover {
    background: var(--pagination-hover-bg);
    border-color: var(--pagination-hover-border);
    color: var(--pagination-hover-text);
}

.pag-btn.pag-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #f6f1e8;
    font-weight: 700;
    cursor: default;
}

.pag-btn.pag-prev,
.pag-btn.pag-next {
    font-size: 18px;
    padding: 0 8px;
    min-width: 32px;
}

.pag-dots {
    color: var(--text-muted);
    font-size: 14px;
    padding: 0 4px;
    user-select: none;
}

/* FOOTER */

.footer-rich {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 28px;
    max-width: 1160px;
    margin: 48px auto 32px;
    padding: 20px 30px 0;
    border-top: 1px solid var(--footer-border);
}

.footer-brand-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
}

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

.footer-meta span {
    margin: 0 8px;
    opacity: 0.6;
}

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

.footer-credit a {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s;
}

.footer-credit a:hover {
    color: var(--text);
}

/* SEO FOOTER — Apple-style directory: full-width quiet panel, dense
   text-link columns over a barely-lifted background, hairline legal bar.
   Links keep the .seo-chip hook (click interception + count injection in
   main.js) but render as plain quiet text. Counts read as small muted
   numbers after the label instead of pills. */
.footer-seo {
    margin-top: 80px;
}

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

.fa-inner {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 24px;
}

.fa-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 40px;
    padding: 30px 0 32px;
    /* Hairline matches the legal-bar rule: contained to the column width,
       not bleeding edge-to-edge. */
    border-top: 1px solid rgba(255,240,222,0.06);
}

.fa-col { min-width: 0; }

.fa-col h3 {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    color: rgba(244,238,228,0.84);
}

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

.fa-col li {
    margin: 0 0 9px;
}

.seo-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 12px;
    line-height: 1.45;
    color: rgba(244,238,228,0.61);
    text-decoration: none;
    transition: color 0.15s ease;
}

.seo-chip:hover {
    color: rgba(244,238,228,0.91);
    text-decoration: underline;
}

/* Live result count (injected by main.js) — a quiet number, not a badge. */
.seo-n {
    font-size: 10.5px;
    color: rgba(244,238,228,0.41);
    font-variant-numeric: tabular-nums;
}

.seo-chip:hover .seo-n {
    color: var(--accent);
    text-decoration: none;
}

.fa-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 20px;
    padding: 16px 0 24px;
    border-top: 1px solid rgba(255,240,222,0.06);
    font-size: 12px;
    color: rgba(244,238,228,0.51);
}

.fa-bottom p { margin: 0; }

.fa-bottom a {
    color: rgba(244,238,228,0.71);
    text-decoration: none;
}

.fa-bottom a:hover {
    text-decoration: underline;
    color: rgba(244,238,228,0.91);
}

/* yodatoshi bunny (ASCII favicon, inlined) — sits at the right corner. */
.fa-bunny {
    display: inline-flex;
    align-items: center;
    color: rgba(244,238,228,0.46);
    transition: color 0.15s ease, transform 0.2s ease;
}

.fa-bunny:hover {
    color: rgba(244,238,228,0.96);
    transform: translateY(-1px);
}

/* Sleeping by default (( -.-)), wakes up on hover (( o.o)) — crossfade
   between the two stacked face lines. */
.fa-bunny .face-asleep,
.fa-bunny .face-awake {
    transition: opacity 0.18s ease;
}

.fa-bunny .face-awake { opacity: 0; }

.fa-bunny:hover .face-awake { opacity: 1; }
.fa-bunny:hover .face-asleep { opacity: 0; }

@media (max-width: 900px) {
    .footer-seo { margin-top: 56px; }
    .fa-cols {
        grid-template-columns: 1fr;
        padding: 20px 0 8px;
    }
    .fa-col {
        padding: 14px 0;
        border-bottom: 1px solid rgba(255,240,222,0.05);
    }
    .fa-col:last-child { border-bottom: none; }
    .fa-bottom { flex-direction: column; align-items: flex-start; }
}

/* MOBILE RESPONSIVE */

@media (max-width: 1100px) {
    .job-info { display: flex; flex-direction: column; }
    .job-title-row { order: 1; }
    .job-card-header { order: 2; }
    .job-grid {
        grid-template-columns: 1fr;
    }
    #main-container {
        padding: 0 40px;
    }

    #logo {
    margin-top: -20px;
    }

}

/* ── Mobile ≤640px (after 1100px block to win cascade) ────────────────────── */
@media (max-width: 640px) {
    #hero { padding: 72px 0 20px; }
    .hero-content { padding: 0 8px; }
    #logo { margin-top: -8px; margin-bottom: -9px; }
    .logo-text { margin-bottom: -24px; }
    .logo-text img {
        width: 218px;
        height: 80.7px;
        -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
    }
    /* The age chip and Apply share the card's right edge; on mobile cards
       get tight, so drop both there. */
    .job-new { display: none; }
    .job-cta { display: none; }
    .job-title-row { order: 2; }
    .job-card-header { order: 1; }
    .search-icon-desktop { display: none; }
    .search-icon-mobile { display: block; }
    #search-container { width: 78%; }
    .search-input { font-size: 18px; }
    .search-box {
        padding: 8px 18px 8px 22px;
        box-shadow: inset 0 1px 0 rgba(255,240,222,0.06), 0 2px 8px rgba(0,0,0,0.3);
    }

    .quick-searches { gap: 6px; margin-top: 14px; max-width: calc(100vw - 20px); }
    .qs-chip { padding: 5px 11px; font-size: 11.5px; gap: 5px; }
    .qs-chip svg { width: 12px; height: 12px; }
    .qs-chip:nth-child(n+4) { display: none; }

    /* MOBILE CARD GUTTER RULE — read before touching.
       The hanging company logos stick out 18px to the LEFT of each job card
       (see .job-logo-wrapper margin-left: -34px below, which overhangs past
       the card's 16px padding). So the left container padding is deliberately
       LARGER than the right (32px vs 14px): logos then sit 18px from the
       screen edge, matching the 18px of empty space on the right of the card.
       Net effect — the card div is 36px from the left edge, 18px from the
       right, so the VISIBLE empty space is equal on both sides.
       DO NOT "fix" this back to symmetric padding: with equal padding the
       logos land flush against the left screen edge (0px gap) and the board
       looks lopsided. If the logo overhang ever changes, rebalance so that
       leftPadding − logoOverhang == rightPadding + 4px grid gutter. */
    #main-container { padding: 0 14px 0 24px; margin-top: 4px; }
    .job-grid { gap: 12px; }
    .stats-bar { padding-left: 2px; margin-bottom: 6px; }

    /* Near-desktop proportions: same hanging-logo structure as the default
       styles, scaled down just enough for one-hand use. */
    .job-card { padding: 13px 16px; border-radius: 18px; }
    .job-logo-wrapper {
        width: 36px; height: 36px;
        /* Straddle the card border dead-center: -(card padding 16px + half of 36px) */
        margin-left: -34px; margin-right: 14px;
        border-radius: 13px;
    }
    .job-logo { border-radius: 9px; }
    .job-title { font-size: 17px; }
    .job-company { font-size: 11px; }
    .job-location { font-size: 10.5px; }
    .job-card-header { gap: 9px; margin-bottom: 7px; }

    /* Deep pages render up to 9 pagination buttons; on narrow screens that
       row is wider than the viewport, so let it wrap instead of scrolling
       horizontally (and trim button chrome to fit more on one line). */
    .pagination { flex-wrap: wrap; gap: 8px 6px; padding: 0 4px; }
    .pag-btn { min-width: 34px; height: 34px; padding: 0 8px; }
    .pag-btn.pag-prev, .pag-btn.pag-next { min-width: 30px; }
    .pag-dots { padding: 0 2px; }

    .pagination { margin-top: 20px; }
}

/* Cookie consent note (built by track.js, bottom-left). */
.cookie-note {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 400;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px 12px;
    width: 300px;
    padding: 14px 14px 12px;
    border-radius: 16px;
    background: #1c1c1b;
    border: 1px solid rgba(255,240,222,0.08);
    box-shadow: 0 10px 40px rgba(0,0,0,0.55);
    color: var(--text);
    font: 13px/1.45 'DM Sans', sans-serif;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .3s ease, transform .3s ease;
}
.cookie-note.show { opacity: 1; transform: none; }
.cookie-note p { margin: 0; }
.cookie-icon { transform-origin: 50% 50%; }
.cookie-note.show .cookie-icon { animation: cookie-wobble .7s .2s ease-in-out; }
@keyframes cookie-wobble {
    25% { transform: rotate(-16deg); }
    55% { transform: rotate(10deg); }
    80% { transform: rotate(-4deg); }
}
.cookie-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}
.cookie-actions button {
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 13px;
    border-radius: 99px;
    border: 1px solid rgba(255,240,222,0.12);
    background: transparent;
    color: var(--text);
    cursor: pointer;
}
.cookie-actions button:hover { color: #f6f1e8; border-color: rgba(255,240,222,0.24); }
.cookie-actions .primary { background: var(--accent); border-color: var(--accent); color: #062b1d; }
.cookie-actions .primary:hover { color: #062b1d; border-color: var(--accent); filter: brightness(1.08); }
.cookie-actions button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.fa-cookies {
    font: inherit;
    color: rgba(244,238,228,0.71);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.fa-cookies:hover { text-decoration: underline; color: rgba(244,238,228,0.91); }

@media (max-width: 520px) {
    .cookie-note { left: 12px; right: 12px; bottom: 12px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .cookie-note { transition: none; }
    .cookie-note.show .cookie-icon { animation: none; }
}

/* ══ Shared by both themes ══════════════════════════════════════════════ */

/* DM Sans (variable, latin, 400-700), self-hosted and preloaded so text
   is never drawn in a fallback face first and then swapped. */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: block;
    src: url('/static/fonts/dm-sans.woff2') format('woff2');
}

/* Self-hosted subset of Comfortaa Bold holding only the letters of the
   wordmark plus a few spare letters (it covers "upvalla" and "vallley";
   regenerate it if the name changes), 2KB,
   preloaded. font-display: block, so the wordmark is never first
   drawn in a fallback face and then swapped. */
@font-face {
    font-family: 'wordmark';
    font-style: normal;
    font-weight: 700;
    font-display: block;
    src: url('/static/fonts/comfortaa-wordmark.woff') format('woff');
}

/* ── upvalla wordmark ──
   Comfortaa Bold, thickened with a stroke, matches the outlined Vallley logo
   (static/logo.svg) that came before it. */
.logo-text { line-height: 1; margin-bottom: 0; }
.brand {
    --word: 72px;
    display: inline-flex;
    align-items: center;
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.32)) drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}
.brand-word {
    font-family: 'wordmark', 'DM Sans', sans-serif;
    font-size: var(--word);
    font-weight: 700;
    line-height: 1;
    padding: 0 0.06em 0.08em;
    color: #fff;
    -webkit-text-stroke: 0.055em #fff;
    paint-order: stroke fill;
}
/* Kerned for even colour, not even distance: stems need the most air, and the
   v nests into its neighbours because its diagonals open up so much space. */
.brand-word span:nth-child(1) { margin-left: -0.036em; }
.brand-word span:nth-child(2) { margin-left: -0.046em; }
.brand-word span:nth-child(3) { margin-left: -0.046em; }
.brand-word span:nth-child(4) { margin-left: 0.002em; }
.brand-word span:nth-child(5) { margin-left: 0; }
.brand-word span:nth-child(6) { margin-left: -0.003em; }
#logo { margin: -26px 0 30px; }

@media (max-width: 640px) {
    .brand { --word: 60px; }
    #logo { margin: -18px 0 24px; }
}

/* ── Hero photo ──
   The photo is masked, not painted over: where it fades, the page itself
   shows through, so the dissolve is clean with no grey wash.
   The dissolve is an arch (an ellipse from the top centre), so the photo
   reaches lowest in the middle and curves up at the sides instead of ending
   in a rectangle; every stop follows an ease-in-out curve. Lower down,
   a progressive blur softens focus as the photo disappears. */
.site-bg {
    /* Lives inside #hero, so the photo always ends with the hero (plus a
       short tail for the dissolve) and never runs behind the job list. */
    height: auto;
    bottom: -30px;
    -webkit-mask-image: radial-gradient(ellipse 66% 100% at 50% 0%, rgba(0,0,0,1.000) 38.0%, rgba(0,0,0,0.987) 42.1%, rgba(0,0,0,0.950) 46.3%, rgba(0,0,0,0.891) 50.4%, rgba(0,0,0,0.812) 54.6%, rgba(0,0,0,0.717) 58.7%, rgba(0,0,0,0.611) 62.9%, rgba(0,0,0,0.500) 67.0%, rgba(0,0,0,0.389) 71.1%, rgba(0,0,0,0.283) 75.3%, rgba(0,0,0,0.188) 79.4%, rgba(0,0,0,0.109) 83.6%, rgba(0,0,0,0.050) 87.7%, rgba(0,0,0,0.013) 91.9%, rgba(0,0,0,0.000) 96.0%);
    mask-image: radial-gradient(ellipse 66% 100% at 50% 0%, rgba(0,0,0,1.000) 38.0%, rgba(0,0,0,0.987) 42.1%, rgba(0,0,0,0.950) 46.3%, rgba(0,0,0,0.891) 50.4%, rgba(0,0,0,0.812) 54.6%, rgba(0,0,0,0.717) 58.7%, rgba(0,0,0,0.611) 62.9%, rgba(0,0,0,0.500) 67.0%, rgba(0,0,0,0.389) 71.1%, rgba(0,0,0,0.283) 75.3%, rgba(0,0,0,0.188) 79.4%, rgba(0,0,0,0.109) 83.6%, rgba(0,0,0,0.050) 87.7%, rgba(0,0,0,0.013) 91.9%, rgba(0,0,0,0.000) 96.0%);
}
.hero-slide {
    position: absolute;
    inset: 0;
    transform: scale(1.16);
    transform-origin: 50% 0;
    background: url('/static/bg2.jpg') 50% 0% / cover no-repeat;
    /* Miniature look: a little extra saturation and contrast. */
    filter: brightness(1.2) saturate(1.16) contrast(1.03) sepia(0.24);
}
/* Tilt-shift: a sharp horizontal band across the desk with the plant and
   cat, and focus falling off above and below. Two blurred copies of the
   photo (soft, then strong) make the falloff progressive, like a tilted lens
   plane. They inherit the photo's colour filter from .hero-slide. */
.hero-blur {
    position: absolute;
    inset: 0;
    background: inherit;
    filter: blur(3.5px);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1.000) 0.0%, rgba(0,0,0,1.000) 12.0%, rgba(0,0,0,0.962) 14.2%, rgba(0,0,0,0.854) 16.5%, rgba(0,0,0,0.691) 18.8%, rgba(0,0,0,0.500) 21.0%, rgba(0,0,0,0.309) 23.2%, rgba(0,0,0,0.146) 25.5%, rgba(0,0,0,0.038) 27.8%, rgba(0,0,0,0.000) 30.0%, rgba(0,0,0,0.000) 42.0%, rgba(0,0,0,0.038) 44.2%, rgba(0,0,0,0.146) 46.5%, rgba(0,0,0,0.309) 48.8%, rgba(0,0,0,0.500) 51.0%, rgba(0,0,0,0.691) 53.2%, rgba(0,0,0,0.854) 55.5%, rgba(0,0,0,0.962) 57.8%, rgba(0,0,0,1.000) 60.0%, rgba(0,0,0,1.000) 100.0%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1.000) 0.0%, rgba(0,0,0,1.000) 12.0%, rgba(0,0,0,0.962) 14.2%, rgba(0,0,0,0.854) 16.5%, rgba(0,0,0,0.691) 18.8%, rgba(0,0,0,0.500) 21.0%, rgba(0,0,0,0.309) 23.2%, rgba(0,0,0,0.146) 25.5%, rgba(0,0,0,0.038) 27.8%, rgba(0,0,0,0.000) 30.0%, rgba(0,0,0,0.000) 42.0%, rgba(0,0,0,0.038) 44.2%, rgba(0,0,0,0.146) 46.5%, rgba(0,0,0,0.309) 48.8%, rgba(0,0,0,0.500) 51.0%, rgba(0,0,0,0.691) 53.2%, rgba(0,0,0,0.854) 55.5%, rgba(0,0,0,0.962) 57.8%, rgba(0,0,0,1.000) 60.0%, rgba(0,0,0,1.000) 100.0%);
}
.hero-blur-strong {
    filter: blur(11px);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1.000) 0.0%, rgba(0,0,0,1.000) 4.0%, rgba(0,0,0,0.962) 6.5%, rgba(0,0,0,0.854) 9.0%, rgba(0,0,0,0.691) 11.5%, rgba(0,0,0,0.500) 14.0%, rgba(0,0,0,0.309) 16.5%, rgba(0,0,0,0.146) 19.0%, rgba(0,0,0,0.038) 21.5%, rgba(0,0,0,0.000) 24.0%, rgba(0,0,0,0.000) 50.0%, rgba(0,0,0,0.038) 53.5%, rgba(0,0,0,0.146) 57.0%, rgba(0,0,0,0.309) 60.5%, rgba(0,0,0,0.500) 64.0%, rgba(0,0,0,0.691) 67.5%, rgba(0,0,0,0.854) 71.0%, rgba(0,0,0,0.962) 74.5%, rgba(0,0,0,1.000) 78.0%, rgba(0,0,0,1.000) 100.0%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1.000) 0.0%, rgba(0,0,0,1.000) 4.0%, rgba(0,0,0,0.962) 6.5%, rgba(0,0,0,0.854) 9.0%, rgba(0,0,0,0.691) 11.5%, rgba(0,0,0,0.500) 14.0%, rgba(0,0,0,0.309) 16.5%, rgba(0,0,0,0.146) 19.0%, rgba(0,0,0,0.038) 21.5%, rgba(0,0,0,0.000) 24.0%, rgba(0,0,0,0.000) 50.0%, rgba(0,0,0,0.038) 53.5%, rgba(0,0,0,0.146) 57.0%, rgba(0,0,0,0.309) 60.5%, rgba(0,0,0,0.500) 64.0%, rgba(0,0,0,0.691) 67.5%, rgba(0,0,0,0.854) 71.0%, rgba(0,0,0,0.962) 74.5%, rgba(0,0,0,1.000) 78.0%, rgba(0,0,0,1.000) 100.0%);
}
/* Keeps the wordmark, search and chips legible over the busy desk. */
.hero-scrim {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 42% 40% at 50% 46%, rgba(21,18,15,0.38) 0%, rgba(21,18,15,0.18) 50%, transparent 100%);
}

@media (max-width: 640px) {
    .site-bg { bottom: -18px; }
}