* { margin: 0; padding: 0; box-sizing: border-box; }
        ::selection { background: rgba(180,180,180,0.35); color: #1a2a0e; }

        html { overflow-x: hidden; }
        body { background-color: #ffffff; min-height: 100vh; font-family: 'Oswald', sans-serif; color: #3A4A20; }

        /* Fixed-width desktop layout: a constant 0.81 zoom
           and a centered 1280–1615px body. Gated by a CSS media query so the
           decision is made by the browser against the REAL viewport — reliable
           on every device. (It used to be a JS window.innerWidth check, which
           iOS Safari gets wrong at load and forced the desktop layout onto
           phones.) Mobile (≤768px) keeps its native responsive layout;
           --bleed, set in viewport.js, handles the full-bleed breakout. */
        @media (min-width: 1025px) {
            html { zoom: 0.81; }
            body { min-width: 1280px; max-width: 1615px; margin: 0 auto; }
        }

        /* ---- TOP LOADING BAR ----
           A thin white light-band that sweeps left→right across the very top of
           the whole site while a view rebuilds or an async request runs. Sits
           above everything; the fixed topographic background (#topo-bg) stays
           visible behind the content the whole time, so loading never flashes
           white. Transform/opacity only, so it animates on the compositor and
           stays smooth even while the main thread is busy rendering a heavy view. */
        /* ---- INITIAL BOOT PROGRESS BAR ----
           A thin line that fills across the top while the page + the 2.4MB gear
           catalogue download. Uses transform:scaleX (compositor-driven) not
           width, so it keeps animating even while gear-data.js parses and blocks
           the main thread. It fills to ~90% on its own, then JS snaps it to 100%
           and fades once the app is ready and search works. */
        #ta-bootbar {
            position: fixed; top: 0; left: 0; width: 100%; height: 3px;
            z-index: 100001; pointer-events: none;
            transform: scaleX(0); transform-origin: 0 50%;
            background: linear-gradient(90deg, #3A4A20, #7a9448, #9ad860);
            box-shadow: 0 0 10px rgba(122,148,72,0.7);
            animation: ta-bootfill 9s cubic-bezier(.15,.7,.25,1) forwards;
        }
        @keyframes ta-bootfill {
            0% { transform: scaleX(0.03); } 15% { transform: scaleX(0.40); }
            50% { transform: scaleX(0.75); } 100% { transform: scaleX(0.90); }
        }
        #ta-bootbar.ta-done {
            transform: scaleX(1); animation: none; opacity: 0;
            transition: transform .18s ease, opacity .5s ease .12s;
        }
        @media (prefers-reduced-motion: reduce) { #ta-bootbar { animation-duration: 3s; } }

        #ta-loadbar {
            position: fixed; top: 0; left: 0; right: 0; height: 2.5px;
            z-index: 100000; pointer-events: none; overflow: hidden;
            opacity: 0; transition: opacity 0.25s ease;
        }
        #ta-loadbar.on { opacity: 1; }
        #ta-loadbar::before {
            content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 42%;
            background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #ffffff 50%, rgba(255,255,255,0) 100%);
            box-shadow: 0 0 10px 1px rgba(255,255,255,0.85);
            animation: ta-loadsweep 0.9s linear infinite;
            will-change: transform;
        }
        @keyframes ta-loadsweep {
            0%   { transform: translateX(-100%); }
            100% { transform: translateX(240%); }
        }
        @media (prefers-reduced-motion: reduce) {
            #ta-loadbar::before { animation-duration: 1.6s; }
        }

        /* Mobile-only affordance (see jumpToResultsHeader in navigation.js).
           Hidden by default so a rotate-to-landscape never leaves it stranded;
           screener.css turns it on inside the phone media query. */
        .results-jump-hint { display: none; }

        /* ---- HEADER ---- */
        header {
            padding: 14px 0 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 18px;
            position: sticky;
            top: 0;
            background: #ffffff;
            z-index: 200;
            /* Full-bleed: the body is width-capped, but the header bar spans the
               whole layout width. --bleed (set in viewport.js) is a px breakout
               that composes with the page `zoom` in every browser — plain
               `50vw` does NOT scale with zoom in Chrome, which boxed the header
               in. Falls back to the vw calc pre-JS; 0 on mobile. */
            margin-left: var(--bleed, calc(50% - 50vw));
            margin-right: var(--bleed, calc(50% - 50vw));
        }

        /* ---- SEARCH ---- */
        .search-wrapper { width: 23.6%; position: relative; }

        .search-icon {
            position: absolute; left: 16px; top: 50%;
            transform: translateY(-50%);
            color: #c0c0c0;
            pointer-events: none; z-index: 1;
            display: flex; align-items: center;
        }

        .search-bar {
            width: 100%;
            padding: 12px 24px 12px 46px;
            border-radius: 50px;
            /* Two steps down the site's green ramp from the Build My Pack
               button (#3A4A20 -> #5a7030 -> #7a9448) — light enough not to
               box the input in, still clearly the brand green. */
            border: 2px solid #7a9448;
            outline: none;
            -webkit-appearance: none;
            appearance: none;
            font-family: 'Oswald', sans-serif;
            font-size: 15.6px; letter-spacing: 1px;
            background: #ffffff; color: #3A4A20;
            transition: border-color 0.2s, background 0.2s;
        }

        .search-bar::placeholder { color: #9ab860; }
        /* The bar is type="search" so password managers leave it alone (see the
           comment on the input). WebKit then draws its own clear button and
           decoration inside the field, which would break the pill. Hide them and
           keep the appearance exactly as it was. */
        .search-bar::-webkit-search-cancel-button,
        .search-bar::-webkit-search-decoration,
        .search-bar::-webkit-search-results-button,
        .search-bar::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; display: none; }
        .cat-search-bar {
            width: 100%; padding: 9px 16px; border-radius: 8px;
            border: 1.5px solid #c4d898; outline: none;
            font-family: 'Oswald', sans-serif; font-size: 13.5px; letter-spacing: 1px;
            background: #f9fdf2; color: #3A4A20; transition: border-color 0.2s;
        }
        .cat-search-bar::placeholder { color: #9ab860; }
        .cat-search-bar:focus { border-color: #3A4A20; background: #f2f7e8; }
        .search-bar:focus {
            border-color: #3A4A20;
            background: #f2f7e8;
        }

        .search-dropdown {
            display: none; position: absolute;
            top: calc(100% + 6px); left: 0; right: 0;
            background: #f2f7e8;
            border: 2px solid #3A4A20;
            border-radius: 14px;
            overflow: hidden; z-index: 300;
        }

        .search-dropdown.visible { display: block; }

        .dd-item {
            padding: 11px 18px; cursor: pointer;
            display: flex; justify-content: space-between; align-items: center;
            border-bottom: 1px solid #c4d898;
            transition: background 0.15s;
        }

        .dd-item:last-child { border-bottom: none; }
        .dd-item:hover { background: #e4efd0; }
        .dd-item-name { font-size: 14.6px; font-weight: 500; color: #3A4A20; letter-spacing: 0.3px; }
        .dd-item-meta { font-size: 11.4px; color: #7a9448; letter-spacing: 1px; text-transform: uppercase; margin-top: 2px; }
        .dd-item-cat { font-size: 11.4px; color: #9ab860; letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap; }
        .dd-empty { padding: 14px 18px; font-size: 13.5px; color: #9ab860; letter-spacing: 1px; }

        /* "See all results" row that closes the dropdown — the way out of the
           seven-row list into the full, similarity-scored results page. Also
           shown when the verbatim dropdown finds nothing, since the results
           page tolerates typos and partial words and usually still has hits. */
        .dd-seeall {
            padding: 12px 18px; font-size: 12.5px; font-weight: 700;
            font-family: 'Oswald', sans-serif; letter-spacing: 1.2px;
            text-transform: uppercase; color: #3A4A20; cursor: pointer;
            border-top: 1px solid #e4efd0; background: #f6faf0;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .dd-seeall:hover { background: #eaf5d4; color: #D4681E; }

        /* ── Search results page ── */
        .sr-hd { color: #3A4A20; font-size: 22.4px; font-style: italic; }
        .sr-grid {
            display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 14px; margin-bottom: 18px;
        }
        .sr-card { cursor: pointer; }
        .sr-card-rating { margin: 6px 0 2px; }
        .sr-card-wt { font-size: 12px; color: #9ab860; font-family: 'Inter', sans-serif; }
        .sr-more-wrap { text-align: center; padding: 6px 0 34px; }
        .sr-more {
            padding: 11px 26px; background: #3A4A20; color: #c4d898; border: none;
            border-radius: 9px; font-family: 'Oswald', sans-serif; font-size: 12px;
            font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; cursor: pointer;
        }
        .sr-more:hover { background: #4a6035; }
        .sr-empty {
            background: rgba(255,255,255,0.85); border: 1px solid #d6eab8;
            border-radius: 10px; padding: 40px 26px; text-align: center; margin-bottom: 30px;
        }
        .sr-empty-hd {
            font-family: 'Oswald', sans-serif; font-size: 17px; font-weight: 700;
            letter-spacing: 1.6px; text-transform: uppercase; color: #3A4A20; margin-bottom: 8px;
        }
        .sr-empty-sub {
            font-family: 'Inter', sans-serif; font-size: 13.5px; color: #5a7840;
            line-height: 1.6; max-width: 430px; margin: 0 auto 18px;
        }
        .sr-empty-btn {
            padding: 10px 22px; background: #3A4A20; color: #c4d898; border: none;
            border-radius: 8px; font-family: 'Oswald', sans-serif; font-size: 12px;
            font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer;
        }
        @media (max-width: 1024px) {
            .sr-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
            .sr-hd { font-size: 19px; }
        }

        /* ---- NAV ---- */
        nav { display: flex; align-items: center; flex-wrap: nowrap; justify-content: center; gap: 0; }

        /* Collapse nav to hamburger when window is really small */
        @media (max-width: 1024px) {
            nav { display: none !important; }
            header { gap: 10px; }
        }

        /* The hamburger is the MOBILE nav. Above 1024px the full link row is
           visible, so the button was a second, redundant way into the same
           pages — and a drawer over a layout that has nothing hidden. Hidden on
           desktop; it reappears the moment the viewport narrows past the same
           breakpoint the link row uses, so the two always swap cleanly. */
        @media (min-width: 1025px) {
            #hamburgerBtn { display: none !important; }
        }

        nav a {
            font-size: 12.7px; font-weight: 900;
            color: #5a7030;
            text-decoration: none;
            text-transform: uppercase; letter-spacing: 1.8px;
            padding: 4px 13px; cursor: pointer;
            transition: color 0.2s;
            white-space: nowrap;
        }

        nav a:hover, nav a.active { color: #3A4A20; }
        #nav-my-pack { font-size: 15.2px; }
        .nav-dot { color: #c4d898; padding: 0; user-select: none; font-size: 12.7px; }

        /* Sleep Systems dropdown */
        .nav-dd-wrap { position: relative; display: inline-flex; align-items: center; }

        .nav-dd-wrap > a::after { content: ' ▾'; font-size: 10.8px; opacity: 0.55; }

        .nav-submenu {
            display: none; position: absolute;
            top: 100%; left: 0;
            background: #f2f7e8;
            border: 1px solid #c4d898;
            border-radius: 0 0 10px 10px;
            padding: 8px 0 6px;
            min-width: 170px; z-index: 400;
            box-shadow: 0 10px 28px rgba(58,74,32,0.12);
        }

        /* Bridge the gap so mouse can reach dropdown without losing hover */
        .nav-dd-wrap::after {
            content: ''; position: absolute;
            top: 100%; left: 0; right: 0; height: 12px;
        }

        .nav-dd-wrap:hover .nav-submenu { display: block; }

        .nav-submenu a {
            display: block; padding: 10px 18px;
            font-size: 15.5px; letter-spacing: 1.8px;
            color: #5a7030;
            white-space: nowrap; border-radius: 0;
        }

        .nav-submenu a:hover { color: #3A4A20; background: #e4efd0; }

        /* Pack badge */
        .pack-badge {
            display: none;
            align-items: center; justify-content: center;
            background: #D4681E; color: #ffffff;
            font-size: 10.4px; font-weight: 900;
            width: 16px; height: 16px;
            border-radius: 50%; margin-left: 4px;
            vertical-align: middle;
        }

        /* ---- LOGO ---- */
        .header-logo-wrap {
            position: absolute;
            top: 8px;
            left: 16px;
            pointer-events: auto;
            cursor: pointer;
        }
        .header-logo {
            height: 54px;
            width: auto;
            display: block;
        }

        /* ---- TICKER ---- */
        .ticker-strip {
            width: 100%;
            overflow: hidden;
            background: #ffffff;
            border-top: 1.6px solid #D4681E;
            border-bottom: 1.6px solid #D4681E;
            height: 38px;
            display: flex;
            align-items: center;
        }

        .ticker-track {
            display: inline-flex;
            align-items: center;
            white-space: nowrap;
            will-change: transform;
        }

        .ticker-item {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 0 35px;
            cursor: pointer;
        }

        .ticker-item:hover .ticker-sym  { color: #D4681E; }
        .ticker-item:hover .ticker-name { color: #1a2a0e; }

        .ticker-sym {
            font-size: 12.5px;
            font-weight: 900;
            color: #1a2a0e;
            letter-spacing: 1.6px;
            transition: color 0.15s;
        }

        .ticker-name {
            font-size: 10.8px;
            color: #5a7030;
            letter-spacing: 0.6px;
            transition: color 0.15s;
        }

        .ticker-quote {
            font-size: 11.4px;
            font-weight: 800;
            color: #1a2a0e;
            letter-spacing: 0.5px;
        }

        .ticker-packed {
            font-size: 10.8px;
            font-weight: 900;
            color: #5cbf2a;
            letter-spacing: 0.4px;
        }

        .ticker-pipe {
            color: #111111;
            font-size: 15px;
            user-select: none;
        }

        /* ---- FOOTER ---- */
        .site-footer {
            margin-top: 80px;
            background: #1a2a0e;
            color: #a8b890;
        }
        .footer-main {
            max-width: 1200px;
            margin: 0 auto;
            padding: 52px 48px 40px;
            display: grid;
            /* Columns size to their content and the group is centred, rather
               than three fractional columns stretched across the full 1200px.
               The old 1fr/1fr/1.5fr handed the WIDEST column to Contact, which
               carries the SHORTEST content — so the visible text stopped well
               short of the right edge and the footer read as pushed left even
               though its container was perfectly centred. */
            grid-template-columns: repeat(3, auto);
            justify-content: center;
            gap: 72px;
        }
        .footer-brand-name {
            font-size: 20.8px;
            font-weight: 900;
            letter-spacing: 3px;
            color: #ffffff;
            text-transform: uppercase;
            margin-bottom: 12px;
        }
        .footer-brand-tagline {
            font-size: 12.5px;
            color: #6a8450;
            letter-spacing: 1.2px;
            line-height: 1.7;
            max-width: 260px;
        }
        /* Every column centres its own contents — headings, links, and the
           contact lines — on both desktop and phone. */
        .footer-main > div { text-align: center; }
        .footer-col-heading {
            font-size: 13px;
            font-weight: 900;
            letter-spacing: 2.5px;
            color: #ffffff;
            text-transform: uppercase;
            margin-bottom: 16px;
            padding-bottom: 8px;
            border-bottom: 1px solid #2e4020;
        }
        .footer-col-links {
            display: flex;
            flex-direction: column;
            /* Without this the anchors stretch the full column width, so the
               text would centre but each link's hit area would still be the
               whole row. Shrink them to their own text instead. */
            align-items: center;
            gap: 10px;
        }
        .footer-col-links a {
            font-size: 11px;
            color: #7a9460;
            text-decoration: none;
            letter-spacing: 0.8px;
            transition: color 0.15s;
        }
        .footer-col-links a:hover { color: #D4681E; }
        .footer-contact-item {
            font-size: 11px;
            color: #7a9460;
            letter-spacing: 0.8px;
            margin-bottom: 10px;
            line-height: 1.6;
        }
        .footer-contact-label {
            font-size: 11px;
            color: #4a6035;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            margin-bottom: 3px;
        }
        .footer-email-link {
            color: #D4681E;
            text-decoration: none;
            transition: color 0.15s;
        }
        .footer-email-link:hover { color: #ffffff; }
        .footer-bottom {
            border-top: 1px solid #2e4020;
            padding: 18px 48px;
            max-width: 1200px;
            margin: 0 auto;
            /* Centred stack rather than legal-hard-left / copyright-hard-right.
               With the columns above now centred on their own content, a bar
               pinned to both edges of the full 1200px read as a different,
               wider block sitting under a narrower one. */
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 8px;
        }
        .footer-legal {
            font-size: 11px;
            color: #4a6035;
            letter-spacing: 0.6px;
            line-height: 1.6;
            max-width: 700px;
        }
        .footer-copyright {
            font-size: 11px;
            color: #4a6035;
            letter-spacing: 0.8px;
            white-space: nowrap;
        }


/* Clickable gear names inside the analytics panels (Ultralight Tax,
   Depreciation, Pack Intelligence). Inherits the surrounding type so the panel
   layout is unchanged — only the affordance is added. */
/* These three used to be <div>/<span> with an onclick and are now real <a>
   elements carrying a /gear/<slug> href, so a crawler can reach every gear page
   and a reader can cmd-click one open. They must keep looking exactly as they
   did: an anchor brings its own colour, underline and inline display. */
.td-name, .gear-name-link, a.home-pick-card {
    text-decoration: none;
    color: inherit;
}
.td-name { display: block; }
a.home-pick-card { color: inherit; }
.gear-name-link { cursor: pointer; transition: color 0.15s; }
.gear-name-link:hover { color: #D4681E; text-decoration: underline; }

/* ---- INLINE DEFINITION ICON (see infoIcon() in js/views/definitions.js) ----
   A circled "i" beside a metric label, opening that term's definition.
   It must not move ANYTHING. An inline box slightly taller than the text grows
   the line box and pushes every following section down a pixel or two, which is
   exactly the sort of drift that shows up as "the layout shifted". So the icon is
   pulled out of vertical flow: negative block margins cancel its height, and
   line-height:0 stops it extending the line. Measured identical to no-icon layout
   on both desktop and mobile. */
.ta-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.2px solid #9ab860;
    border-radius: 50%;
    color: #7a9448;
    background: transparent;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    /* The markup is a lowercase "i", but text-transform inherits and most of the
       headings these sit in are uppercase — so it was rendering as "I". */
    text-transform: none;
    line-height: 0;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 5px;
    margin-top: -6px;      /* cancels the icon's own height so the line box */
    margin-bottom: -6px;   /* keeps the height the text alone would have had */
    flex-shrink: 0;
    user-select: none;
    -webkit-user-select: none;
    transition: background 0.15s, color 0.15s;
}
.ta-info:hover, .ta-info:focus-visible { background: #7a9448; color: #ffffff; outline: none; }