/* =========================================================
   LEAGUE FINDER — "The Almanac" edition
   An editorial sports register: warm newsprint paper, ink
   hairlines, serif mastheads (Fraunces), monospaced data
   (IBM Plex Mono), stamp-style statuses, ticket-stub chips,
   clip-out coupon alerts. One vermilion accent. Zero
   gradients; texture comes from solid noise + rules.

   All class names, JS hooks and data attributes from
   find_leagues.html are preserved exactly.
   ========================================================= */

.finder {
    /* ---- paper & ink ---- */
    --paper:   #F4EFE2;
    --paper-2: #ECE5D2;
    --card:    #FBF8EF;
    --ink:     #1C1A15;
    --ink-2:   #4F4A3E;
    --ink-3:   #8C8474;
    --rule:    #D9D0BA;

    /* ---- the one accent: vermilion stamp red ---- */
    --red:      #BF2E1A;
    --red-ink:  #9E2715;
    --red-soft: #F3DCD4;

    /* ---- status inks ---- */
    --open: #2F6B45; --open-soft: #E0EBDC;
    --warn: #92660F; --warn-soft: #F0E4C4;
    --closed: #8C8474;

    /* ---- muted sport inks (index colours, not paint cans) ---- */
    --bball: #A8491C; --bball-deep: #7E3413; --bball-soft: #F0DECF;
    --hock:  #2F5577; --hock-deep:  #23405B; --hock-soft:  #DFE5E9;
    --socc:  #2F6B45; --socc-deep:  #224F33; --socc-soft:  #E0EBDC;
    --misc:  #6E5183; --misc-deep:  #523C63; --misc-soft:  #E7DFEA;

    /* ---- type ---- */
    --serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
    --mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* ---- motion ---- */
    --ease: cubic-bezier(.22, 1, .36, 1);
    --spring: cubic-bezier(.34, 1.3, .64, 1);

    /* ---- letterpress offset shadow ---- */
    --press:    4px 4px 0 0 var(--paper-2);
    --press-lg: 7px 7px 0 0 var(--paper-2);

    /* sport channel defaults */
    --sport: var(--ink); --sport-deep: var(--ink); --sport-soft: var(--paper-2);
}

/* Sport channel — any element with data-sport publishes its palette. */
.finder [data-sport="basketball"], .finder [data-sport="Basketball"] { --sport: var(--bball); --sport-deep: var(--bball-deep); --sport-soft: var(--bball-soft); }
.finder [data-sport="hockey"],     .finder [data-sport="Hockey"]     { --sport: var(--hock);  --sport-deep: var(--hock-deep);  --sport-soft: var(--hock-soft); }
.finder [data-sport="soccer"],     .finder [data-sport="Soccer"]     { --sport: var(--socc);  --sport-deep: var(--socc-deep);  --sport-soft: var(--socc-soft); }
.finder [data-sport="volleyball"], .finder [data-sport="Volleyball"] { --sport: var(--misc);  --sport-deep: var(--misc-deep);  --sport-soft: var(--misc-soft); }
.finder [data-sport="baseball"],   .finder [data-sport="Baseball"]   { --sport: var(--misc);  --sport-deep: var(--misc-deep);  --sport-soft: var(--misc-soft); }
.finder [data-sport="football"],   .finder [data-sport="Football"]   { --sport: var(--misc);  --sport-deep: var(--misc-deep);  --sport-soft: var(--misc-soft); }
.finder [data-sport="pickleball"],        .finder [data-sport="Pickleball"]        { --sport: var(--misc); --sport-deep: var(--misc-deep); --sport-soft: var(--misc-soft); }
.finder [data-sport="baseball-softball"], .finder [data-sport="Baseball/softball"] { --sport: var(--misc); --sport-deep: var(--misc-deep); --sport-soft: var(--misc-soft); }
.finder [data-sport="flag-football"],     .finder [data-sport="Flag football"]     { --sport: var(--misc); --sport-deep: var(--misc-deep); --sport-soft: var(--misc-soft); }

.finder {
    padding-top: var(--nav-height);
    background-color: var(--paper);
    /* newsprint grain — solid speckle, not a gradient */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    color: var(--ink);
    overflow-x: hidden;
    max-width: 100%;
}
.finder * { box-sizing: border-box; }
.finder .container { max-width: 1180px; }

/* anti-CLS box for Phosphor icons */
.finder .ph { display: inline-block; width: 1em; height: 1em; line-height: 1; text-align: center; }

.fn-skip {
    position: absolute; left: 12px; top: -60px; z-index: 100;
    padding: 12px 20px;
    background: var(--ink); color: var(--paper);
    font-family: var(--mono); font-weight: 600; font-size: .8rem;
    letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
    transition: top .15s var(--ease);
}
.fn-skip:focus { top: calc(var(--nav-height) + 10px); outline: 2px solid var(--red); outline-offset: 2px; }

.fn-breadcrumbs { padding: 18px 0 0; }
.fn-breadcrumbs .container {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink-3);
}
.fn-breadcrumbs a { color: var(--ink-3); text-decoration: none; border-bottom: 1px solid transparent; }
.fn-breadcrumbs a:hover { color: var(--red-ink); border-bottom-color: var(--red-ink); }
.fn-breadcrumbs span[aria-current] { color: var(--ink); font-weight: 600; }
.fn-breadcrumbs-sep { color: var(--rule); }

/* =========================================================
   BUTTONS — letterpress plates
   ========================================================= */
.fn-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--mono); font-weight: 600; font-size: .78rem; line-height: 1;
    letter-spacing: .1em; text-transform: uppercase;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    padding: .9rem 1.4rem;
    background: var(--card); color: var(--ink); border: 1.5px solid var(--ink);
    border-radius: 0;
    transition: background .15s var(--ease), color .15s var(--ease),
                transform .15s var(--ease), box-shadow .15s var(--ease);
}
.fn-btn:hover { background: var(--ink); color: var(--paper); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 0 var(--rule); }
.fn-btn:active { transform: translate(1px, 1px); box-shadow: none; }
.fn-btn i { font-size: 1.15em; }

.fn-btn-punch, .finder-apply-button {
    background: var(--red); color: var(--paper); border-color: var(--red-ink);
}
.fn-btn-punch:hover, .finder-apply-button:hover {
    background: var(--ink); border-color: var(--ink); color: var(--paper);
    box-shadow: 3px 3px 0 0 var(--red-soft);
}
.fn-btn-punch:active, .finder-apply-button:active { transform: translate(1px, 1px); box-shadow: none; }

.fn-btn-ghost {
    background: transparent; border-color: transparent; color: var(--ink-2);
    text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px;
}
.fn-btn-ghost:hover { background: transparent; color: var(--red-ink); box-shadow: none; transform: none; text-decoration-color: currentColor; }
.fn-btn-ghost:active { transform: none; }

.fn-btn-outline { background: transparent; }

.fn-btn.disabled, .fn-btn[aria-disabled="true"] { opacity: .35; pointer-events: none; }
.fn-btn-block { width: 100%; }

/* =========================================================
   HERO — the masthead
   ========================================================= */
.fn-hero { position: relative; padding: clamp(1.6rem, 4vw, 3.2rem) 0 clamp(1.2rem, 2.6vw, 2rem); }
.fn-hero .container { position: relative; }

.fn-hero-stage { position: relative; display: flex; flex-direction: column; gap: clamp(1.1rem, 2.4vw, 1.7rem); }
.fn-hero-stage.fn-hero-compact { gap: clamp(.85rem, 1.8vw, 1.2rem); }

/* edition line: "474 ACTIVE ENTRIES ACROSS CANADA · PICK A SPORT" */
.fn-kicker {
    display: flex; align-items: center; gap: 12px; width: 100%;
    font-family: var(--mono); font-size: .72rem; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
}
.fn-kicker::before { content: '✶'; color: var(--red); font-size: .9em; }
.fn-kicker::after { content: ''; flex: 1; height: 1px; background: var(--ink); opacity: .85; }
.fn-kicker .fn-kicker-num { color: var(--red-ink); font-weight: 600; }

.fn-headline {
    font-family: var(--serif); font-weight: 640; font-variation-settings: 'opsz' 100;
    font-size: clamp(2.5rem, 6vw, 4.4rem); line-height: .98; letter-spacing: -.015em;
    color: var(--ink); text-wrap: balance; margin: 0;
}
.fn-headline .fn-pop-word {
    position: relative; font-style: italic; font-weight: 600; color: var(--red);
    white-space: nowrap; padding-bottom: .04em;
    border-bottom: 3px solid var(--red);
}
/* the bouncing ball retires; a typographer's end-mark takes its seat */
.fn-ball {
    display: inline-block; width: .14em; height: .14em; border-radius: 50%;
    background: var(--ink); margin-left: .18em; vertical-align: baseline;
}
.is-landing .fn-headline { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 600; }

.fn-hero-sub { font-size: clamp(.98rem, 1.4vw, 1.1rem); line-height: 1.6; color: var(--ink-2); max-width: 58ch; margin: 0; }

/* =========================================================
   SPORT TILES — index cards from the register
   ========================================================= */
.fn-tiles {
    counter-reset: fn-tile;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 14px;
}
.fn-tile {
    counter-increment: fn-tile;
    position: relative; isolation: isolate;
    display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
    min-height: clamp(150px, 18vw, 196px);
    padding: 18px 18px 16px;
    background: var(--card); color: var(--ink); text-decoration: none;
    border: 1px solid var(--ink); border-top: 4px solid var(--sport);
    overflow: hidden;
    transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
    animation: fn-settle .5s var(--ease) backwards;
}
.fn-tile:nth-child(1) { animation-delay: .03s; }
.fn-tile:nth-child(2) { animation-delay: .08s; }
.fn-tile:nth-child(3) { animation-delay: .13s; }
.fn-tile:nth-child(4) { animation-delay: .18s; }
.fn-tile:nth-child(5) { animation-delay: .23s; }
.fn-tile:nth-child(6) { animation-delay: .28s; }
.fn-tile:nth-child(7) { animation-delay: .33s; }
@keyframes fn-settle { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
/* register index number, top right */
.fn-tile::before {
    content: 'No. ' counter(fn-tile, decimal-leading-zero);
    position: absolute; top: 12px; right: 14px;
    font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; color: var(--ink-3);
}
.fn-tile:hover { transform: translate(-2px, -2px); box-shadow: var(--press-lg); background: var(--card); }
.fn-tile:hover::before { color: var(--red-ink); }
.fn-tile:active { transform: translate(0, 0); box-shadow: var(--press); }
/* faint oversized plate icon */
.fn-tile-ghost {
    position: absolute; right: -16px; bottom: -24px; z-index: -1;
    font-size: 7.4rem; line-height: 1; color: var(--sport); opacity: .1;
    transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.fn-tile:hover .fn-tile-ghost { transform: rotate(-8deg) scale(1.06); opacity: .16; }
.fn-tile-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border: 1px solid var(--rule); background: var(--paper);
    color: var(--sport); font-size: 1.5rem;
}
.fn-tile-foot { display: flex; flex-direction: column; gap: 7px; }
.fn-tile-name {
    font-family: var(--serif); font-weight: 640; font-size: clamp(1.25rem, 1.9vw, 1.55rem);
    letter-spacing: -.01em; line-height: 1.05; color: var(--ink);
}
.fn-tile-go {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--mono); font-size: .68rem; font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.fn-tile-go i { transition: transform .18s var(--ease); }
.fn-tile:hover .fn-tile-go { color: var(--red-ink); }
.fn-tile:hover .fn-tile-go i { transform: translateX(4px); }

.fn-tiles-foot { display: flex; align-items: baseline; gap: 8px; }

/* =========================================================
   SEARCH — the ledger row
   ========================================================= */
.fn-search-or {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--mono); font-size: .72rem; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
    margin: 2px 0 -4px;
}
.fn-search-or::before, .fn-search-or::after { content: ''; height: 1px; width: 32px; background: var(--rule); }

.fn-search { position: relative; display: flex; flex-direction: column; gap: 10px; }
.fn-search-rail { display: none; }     /* retired */
.fn-search-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fn-search-title { display: none; }
.fn-search-status {
    display: inline-flex; align-items: center; gap: 9px; order: 2;
    font-family: var(--mono); font-size: .74rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--open);
}
.fn-search-status .finder-live-status strong { font-weight: 700; }
.fn-search-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--open); animation: fn-pulse 2.4s var(--ease) infinite; }
@keyframes fn-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--open) 45%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.fn-search-bar {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr auto;
    align-items: stretch; gap: 0;
    background: var(--card);
    border: 1.5px solid var(--ink);
    box-shadow: var(--press);
}
.fn-field { position: relative; min-width: 0; border-right: 1px solid var(--rule); }
.fn-field > label {
    position: absolute; left: 16px; top: 8px;
    font-family: var(--mono); font-size: .58rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
    pointer-events: none;
}
.fn-field-hint { display: none; }
.fn-field input, .fn-field select {
    width: 100%; height: 58px; padding: 20px 16px 6px;
    border: none; background: transparent; color: var(--ink);
    font-size: .98rem; font-weight: 500; border-radius: 0;
    font-family: inherit;
}
.fn-field input::placeholder { color: var(--ink-3); font-weight: 400; font-style: italic; }
.fn-field input:focus, .fn-field select:focus {
    outline: none; background: var(--paper);
    box-shadow: inset 0 -2px 0 0 var(--red);
}
.fn-field select {
    appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238C8474' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
}
.fn-field--key::before {
    content: '⌕'; position: absolute; left: 14px; top: 50%; transform: translateY(-38%);
    font-size: 1.1rem; color: var(--ink-3); pointer-events: none;
}
.fn-field--key input { padding-left: 38px; }
.fn-field--key label { left: 38px; }
.fn-search-bar .finder-apply-button { height: auto; align-self: stretch; padding: 0 1.6rem; border: none; border-left: 1.5px solid var(--ink); }
.fn-search-reset {
    align-self: center; justify-self: start;
    font-family: var(--mono); font-size: .72rem; font-weight: 500;
    letter-spacing: .08em; color: var(--ink-3); text-decoration: none;
    border-bottom: 1px dotted var(--ink-3); padding: 1px 0;
}
.fn-search-reset:hover { color: var(--red-ink); border-bottom-color: var(--red-ink); border-bottom-style: solid; }
.fn-search-fields { display: contents; }
.fn-field-row { display: contents; }

/* =========================================================
   QUICK CHIPS — ticket stubs
   ========================================================= */
.fn-chips { padding: 4px 0 0; }
.fn-chips-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fn-chips-label {
    font-family: var(--mono); font-size: .62rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-right: 4px;
}
.fn-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 13px;
    background: var(--card); border: 1px dashed var(--ink-3); color: var(--ink-2);
    font-family: var(--mono); font-size: .76rem; font-weight: 500; text-decoration: none;
    transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease), transform .15s var(--ease);
}
.fn-chip i { color: var(--sport, var(--red)); }
.fn-chip:hover { transform: translateY(-1px); border-color: var(--ink); border-style: solid; background: var(--paper-2); color: var(--ink); }
.fn-chip-open { --sport: var(--open); border-color: var(--open); color: var(--open); background: var(--open-soft); }
button.fn-chip { cursor: pointer; font-family: var(--mono); }
.fn-chip-near i { color: var(--red); }
.fn-chip-near.is-locating { opacity: .55; pointer-events: none; }
.fn-chip-near.is-locating i { animation: fn-near-spin 1s linear infinite; }
@keyframes fn-near-spin { to { transform: rotate(360deg); } }

/* =========================================================
   ADVANCED FILTERS — the fine print drawer
   ========================================================= */
.fn-advanced-section { padding-top: 6px; }
.fn-advanced { width: fit-content; max-width: 100%; }
.fn-advanced-toggle {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 9px 15px; cursor: pointer; list-style: none;
    border: 1px solid var(--ink); background: var(--card);
    font-family: var(--mono); font-weight: 600; font-size: .72rem;
    letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
    transition: background .15s var(--ease), color .15s var(--ease);
}
.fn-advanced-toggle:hover { background: var(--ink); color: var(--paper); }
.fn-advanced-toggle::-webkit-details-marker { display: none; }
.fn-advanced-toggle > i:first-of-type { color: var(--red); }
.fn-advanced-toggle:hover > i:first-of-type { color: var(--paper); }
.fn-advanced-caret { transition: transform .15s var(--ease); }
.fn-advanced[open] .fn-advanced-toggle { background: var(--ink); color: var(--paper); }
.fn-advanced[open] .fn-advanced-toggle > i:first-of-type { color: var(--paper); }
.fn-advanced[open] .fn-advanced-caret { transform: rotate(180deg); }
.fn-advanced-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;
    margin-top: -1px; padding: 18px; width: 100%;
    background: var(--card); border: 1px solid var(--ink);
}
.fn-advanced-row .fn-field { border-right: none; }
.fn-advanced-row .fn-field > label {
    position: static; display: block; padding: 0 0 6px 1px;
}
.fn-advanced-row .fn-field select {
    height: 46px; padding: 0 32px 0 12px;
    border: 1px solid var(--rule); background-color: var(--paper);
    font-size: .88rem;
}
.fn-advanced-row .fn-field select:focus { border-color: var(--red); box-shadow: none; }
.fn-field-check { display: flex; align-items: end; }
.fn-check {
    display: inline-flex; align-items: center; gap: 9px; width: 100%;
    min-height: 46px; padding: 0 12px; cursor: pointer;
    border: 1px solid var(--rule); background: var(--paper);
    font-family: var(--mono); font-size: .76rem; font-weight: 500; color: var(--ink-2);
}
.fn-check input { width: 16px; height: 16px; accent-color: var(--open); cursor: pointer; flex: 0 0 auto; }
.fn-check:hover { border-color: var(--open); }
.fn-check input:checked + span { color: var(--open); font-weight: 600; }

/* =========================================================
   RESULTS LAYOUT
   ========================================================= */
.fn-results { padding: clamp(1.4rem, 3vw, 2.4rem) 0 clamp(2.2rem, 5vw, 3.6rem); }
.fn-results-wrap { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 296px; gap: clamp(1.4rem, 2.6vw, 2.2rem); align-items: start; }
.fn-results-wrap.is-picker { grid-template-columns: 1fr; }
.fn-results-wrap.is-picker .fn-side { display: none; }
.fn-results-wrap.is-loading { opacity: .55; transition: opacity .25s var(--ease); }

.fn-loading-bar { position: absolute; left: 0; right: 0; top: -10px; height: 3px; background: var(--paper-2); overflow: hidden; opacity: 0; transition: opacity .15s var(--ease); }
.fn-results-wrap.is-loading .fn-loading-bar { opacity: 1; }
.fn-loading-bar::after { content: ''; position: absolute; inset: 0; width: 38%; background: var(--red); animation: fn-slide 1.05s var(--ease) infinite; }
@keyframes fn-slide { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }

.fn-result-h {
    font-family: var(--serif); font-weight: 640; font-size: clamp(1.45rem, 2.6vw, 2.1rem);
    letter-spacing: -.01em; line-height: 1.06; color: var(--ink); margin: 0;
}
.fn-result-h:focus { outline: none; }
.fn-result-sub { margin: 8px 0 0; color: var(--ink-2); font-size: .95rem; line-height: 1.6; }
.fn-result-sub strong { color: var(--ink); font-weight: 700; }

/* ---- picker extras: the gazetteer ---- */
.fn-picker { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; border-top: 2px solid var(--ink); }
.fn-coverage { }
.fn-coverage-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 2px 28px; margin-top: 6px;
}
.fn-coverage-city {
    display: flex; align-items: baseline; gap: 8px;
    padding: 9px 2px; text-decoration: none;
    border-bottom: 1px dotted var(--rule);
    transition: background .12s var(--ease);
}
.fn-coverage-city:hover { background: var(--card); }
.fn-coverage-name { color: var(--ink); font-weight: 600; font-size: .94rem; }
.fn-coverage-city::after { content: ''; flex: 1; border-bottom: 1px dotted var(--ink-3); transform: translateY(-4px); min-width: 14px; }
.fn-coverage-count {
    order: 3; font-family: var(--mono); font-size: .8rem; font-weight: 600; color: var(--red-ink);
}
.fn-coverage-count span { display: none; }
.fn-coverage-bar { display: none; }
.fn-picker-or { color: var(--ink-3); font-size: .9rem; font-style: italic; margin: 8px 0 0; }
.fn-picker-sports { display: none; }

/* =========================================================
   RESULT BOARD — section masthead
   ========================================================= */
.fn-result-board {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin-bottom: clamp(1rem, 2vw, 1.4rem); padding-top: 10px; border-top: 2px solid var(--ink);
}
.fn-result-board .fn-label { display: none; }
.fn-result-board > div:first-child { display: flex; flex-direction: column; gap: 4px; }
.fn-regtoggle { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: .85rem; color: var(--ink-2); }
.fn-regtoggle i { color: var(--red); }
.fn-regtoggle.is-open i { color: var(--open); }
.fn-regtoggle a { color: var(--red-ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--red-soft); }
.fn-regtoggle a:hover { border-bottom-color: currentColor; }

.fn-result-counts { display: flex; gap: 0; border: 1px solid var(--ink); background: var(--card); }
.fn-result-count-item { text-align: center; padding: 10px 18px; border-right: 1px solid var(--rule); }
.fn-result-count-item:last-child { border-right: none; }
.fn-result-count-num { display: block; font-family: var(--mono); font-weight: 600; font-size: 1.3rem; line-height: 1; color: var(--ink); }
.fn-result-count-num em { color: var(--red); font-style: normal; }
.fn-result-count-label { display: block; margin-top: 5px; font-family: var(--mono); font-size: .56rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

.fn-activefilters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.fn-activefilters-label { font-family: var(--mono); font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.fn-activefilter {
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px;
    background: var(--ink); color: var(--paper);
    font-family: var(--mono); font-size: .74rem; font-weight: 500; text-decoration: none;
}
.fn-activefilter span { opacity: .65; }
.fn-activefilter:hover { background: var(--red); }
.fn-activefilters-clear { font-family: var(--mono); font-size: .72rem; font-weight: 500; color: var(--ink-3); text-decoration: none; border-bottom: 1px dotted var(--ink-3); }
.fn-activefilters-clear:hover { color: var(--ink); border-bottom-style: solid; }

/* ---- scope intro: the abstract + figures table ---- */
.fn-scope-intro { margin-bottom: 18px; }
.fn-scope-lead { color: var(--ink-2); font-size: .98rem; line-height: 1.65; max-width: 72ch; }
.fn-scope-lead::first-letter { font-family: var(--serif); font-weight: 700; font-size: 1.35em; color: var(--ink); }
.fn-scope-stats { display: flex; flex-wrap: wrap; gap: 0; margin-top: 14px; border: 1px solid var(--ink); background: var(--card); width: fit-content; max-width: 100%; }
.fn-scope-stat { padding: 12px 18px; border-right: 1px solid var(--rule); }
.fn-scope-stat:last-child { border-right: none; }
.fn-scope-stat-num { font-family: var(--mono); font-weight: 600; font-size: 1.25rem; line-height: 1; color: var(--ink); }
.fn-scope-stat-num.is-open { color: var(--open); }
.fn-scope-stat-num.is-fee { font-size: .95rem; padding-top: 4px; }
.fn-scope-stat-num.is-closing { color: var(--red-ink); }
.fn-scope-stat-label { margin-top: 6px; font-family: var(--mono); font-size: .56rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

/* facet cross-links */
.fn-facetlinks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; }
.fn-facetlinks-label { font-family: var(--mono); font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.fn-facetlink {
    display: inline-flex; align-items: center; padding: 6px 12px;
    background: var(--card); border: 1px solid var(--rule);
    font-family: var(--mono); font-size: .76rem; font-weight: 500; color: var(--ink); text-decoration: none;
    transition: border-color .15s var(--ease), background .15s var(--ease);
}
.fn-facetlink:hover { border-color: var(--ink); background: var(--paper-2); }

/* sort: index tabs */
.fn-sortbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-bottom: 16px; border-bottom: 1px solid var(--rule); padding-bottom: 0; }
.fn-sortbar-label { font-family: var(--mono); font-size: .6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-right: 10px; }
.fn-sortbar-link {
    padding: 7px 12px 9px; margin-bottom: -1px;
    font-family: var(--mono); font-size: .74rem; font-weight: 500; text-decoration: none; color: var(--ink-3);
    border-bottom: 2px solid transparent;
    transition: color .14s var(--ease), border-color .14s var(--ease);
}
.fn-sortbar-link:hover { color: var(--ink); }
.fn-sortbar-link.is-active { color: var(--ink); font-weight: 600; border-bottom-color: var(--red); }

/* =========================================================
   LEAGUE CARDS — register entries
   ========================================================= */
.fn-grid { counter-reset: fn-entry; display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; }
.fn-card {
    --sport: var(--ink); --sport-deep: var(--ink); --sport-soft: var(--paper-2);
    counter-increment: fn-entry;
    position: relative; display: flex; flex-direction: column; gap: 11px;
    padding: 20px;
    background: var(--card); border: 1px solid var(--ink);
    transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
/* entry number stamped beside the bookmark */
.fn-card::before {
    content: 'No. ' counter(fn-entry, decimal-leading-zero);
    position: absolute; top: 22px; right: 58px;
    font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; color: var(--ink-3);
}
.fn-card:hover { transform: translate(-2px, -2px); box-shadow: var(--press-lg); }
.fn-card.is-featured { outline: 1px solid var(--ink); outline-offset: 3px; }

.fn-save {
    position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--rule); background: var(--card); color: var(--ink-3);
    font-size: 1rem; cursor: pointer; z-index: 3; border-radius: 0;
    transition: color .14s var(--ease), border-color .14s var(--ease), background .14s var(--ease);
}
.fn-save:hover { color: var(--red); border-color: var(--red); }
.fn-save.is-saved { background: var(--red); border-color: var(--red-ink); color: var(--paper); }

.fn-card-anchor { display: flex; align-items: center; gap: 12px; }
.fn-avatar {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; flex: 0 0 auto;
    background: var(--paper); border: 1px solid var(--ink);
}
.fn-avatar::before { content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 4px; background: var(--sport); }
.fn-avatar-mono { font-family: var(--serif); font-weight: 700; font-size: 1.35rem; line-height: 1; color: var(--ink); }
.fn-avatar-badge {
    position: absolute; right: -7px; bottom: -7px; width: 21px; height: 21px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--card); color: var(--sport); font-size: .66rem; border: 1px solid var(--sport);
}
.fn-card-index { display: none; }

.fn-card-body { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.fn-card-title-row { display: flex; flex-direction: column; gap: 8px; }
.fn-card-title {
    font-family: var(--serif); font-weight: 640; font-size: 1.18rem; line-height: 1.2;
    letter-spacing: -.005em; color: var(--ink); margin: 0; padding-right: 44px;
}
.fn-card-title a { color: inherit; text-decoration: none; }
.fn-card-title a:hover { color: var(--red-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.fn-source {
    display: inline-flex; align-items: center; gap: 6px; width: fit-content;
    padding: 3px 9px; border: 1px solid var(--rule);
    background: transparent; color: var(--ink-2);
    font-family: var(--mono); font-size: .6rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.fn-source i { color: var(--ink-3); }
.fn-source.is-powered { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.fn-source.is-powered i { color: var(--paper); }
.fn-source-help { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); }

.fn-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 9px; font-size: .84rem; color: var(--ink-2); font-weight: 500; }
.fn-card-meta span { display: inline-flex; align-items: center; gap: 5px; }
.fn-card-meta i { color: var(--sport); }
.fn-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); }

.fn-card-desc { font-size: .88rem; line-height: 1.55; color: var(--ink-2); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* decision data — the figures line, set in mono like a ledger */
.fn-card-facts {
    display: flex; flex-wrap: wrap; gap: 5px 16px;
    margin: 0; padding: 9px 0;
    border-top: 1px dotted var(--ink-3); border-bottom: 1px dotted var(--ink-3);
    font-family: var(--mono); font-size: .76rem; font-weight: 500; color: var(--ink-2);
}
.fn-cf { display: inline-flex; align-items: center; gap: 5px; }
.fn-cf i { color: var(--ink-3); font-size: 1.05em; }
.fn-cf-fee { color: var(--ink); font-weight: 600; }
.fn-cf-fee i { color: var(--open); }
.fn-cf-deadline.is-urgent { color: var(--red-ink); font-weight: 600; }
.fn-cf-deadline.is-urgent i { color: var(--red-ink); }

/* freshness footnote */
.fn-card-verified { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: .66rem; letter-spacing: .04em; color: var(--ink-3); margin: 0; }
.fn-card-verified.is-live { color: var(--open); }
.fn-card-verified.is-stale { color: var(--warn); }
.fn-fresh-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); flex: 0 0 auto; }
.fn-fresh-dot.is-fresh { background: var(--open); }
.fn-fresh-dot.is-stale { background: var(--warn); }

/* tags — small print; statuses are rubber stamps */
.fn-card-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fn-tag {
    padding: 3px 9px; border: 1px solid var(--rule); background: transparent;
    font-family: var(--mono); font-size: .64rem; font-weight: 500; letter-spacing: .05em; color: var(--ink-2);
}
.fn-tag-status {
    font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    border-width: 1.5px; transform: rotate(-1.6deg);
}
.fn-tag-status.is-open { border-color: var(--open); color: var(--open); background: transparent; }
.fn-tag-status.is-upcoming, .fn-tag-status.is-waitlist { border-color: var(--warn); color: var(--warn); }
.fn-tag-status.is-closed { border-color: var(--ink-3); color: var(--closed); }
.fn-tag-status.is-stale { border-color: var(--rule); color: var(--ink-3); border-style: dashed; }
.fn-tag-fa { border-color: var(--open); color: var(--open); }

.fn-card-disclaimer { font-size: .68rem; line-height: 1.45; color: var(--ink-3); font-style: italic; margin: 0; }

.fn-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 13px; border-top: 1px solid var(--rule); }
.fn-card-actions .fn-btn { padding: .62rem 1rem; font-size: .68rem; }
.fn-card-sublinks { flex-basis: 100%; display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .64rem; color: var(--ink-3); }
.fn-card-sublink { color: var(--ink-3); text-decoration: none; border-bottom: 1px dotted var(--ink-3); }
.fn-card-sublink:hover { color: var(--red-ink); border-bottom-color: var(--red-ink); border-bottom-style: solid; }

/* =========================================================
   EMPTY STATE — a blank page in the register
   ========================================================= */
.fn-empty { text-align: center; padding: clamp(2.4rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem); background: var(--card); border: 1px dashed var(--ink-3); }
.fn-empty-mark {
    width: 72px; height: 72px; margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center; border-radius: 50%;
    border: 1.5px solid var(--ink); color: var(--red); font-size: 1.9rem; background: var(--paper);
}
.fn-empty h2 { font-family: var(--serif); font-weight: 640; font-size: clamp(1.3rem, 2.5vw, 1.7rem); color: var(--ink); margin: 0 0 8px; }
.fn-empty p { color: var(--ink-2); max-width: 52ch; margin: 0 auto 18px; line-height: 1.6; }
.fn-empty-nearby { margin-bottom: 18px; }
.fn-empty-nearby-label { display: block; font-family: var(--mono); font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.fn-empty-nearby-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.fn-empty-nearby-links a {
    padding: 7px 13px; background: var(--paper); border: 1px solid var(--rule);
    color: var(--ink); text-decoration: none; font-family: var(--mono); font-size: .76rem; font-weight: 500;
    transition: border-color .14s var(--ease);
}
.fn-empty-nearby-links a span { color: var(--red-ink); }
.fn-empty-nearby-links a:hover { border-color: var(--ink); }
.fn-empty-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* =========================================================
   SCOPE ALERT — the clip-out coupon
   ========================================================= */
.fn-alertbox {
    position: relative;
    margin: 28px 0 6px; padding: 24px 26px;
    background: var(--card); border: 1.5px dashed var(--ink);
}
.fn-alertbox::before {
    content: '✂'; position: absolute; top: -13px; left: 22px;
    font-size: 1.15rem; color: var(--ink-2); background: var(--paper); padding: 0 6px;
    transform: rotate(90deg);
}
.fn-alertbox-title {
    display: flex; align-items: center; gap: 9px;
    font-family: var(--serif); font-weight: 640; font-size: 1.2rem; margin: 0 0 5px; color: var(--ink);
}
.fn-alertbox-title i { color: var(--red); font-size: 1.05em; }
.fn-alertbox-sub { margin: 0 0 14px; color: var(--ink-2); font-size: .92rem; line-height: 1.55; max-width: 62ch; }
.fn-alertbox-form { display: flex; flex-wrap: wrap; gap: 10px; }
.fn-alertbox-form input[type="email"] {
    flex: 1 1 240px; height: 48px; padding: 0 14px;
    border: 1px solid var(--ink); background: var(--paper);
    color: var(--ink); font-size: .92rem; font-family: var(--mono); border-radius: 0;
}
.fn-alertbox-form input[type="email"]::placeholder { color: var(--ink-3); }
.fn-alertbox-form input[type="email"]:focus { outline: none; box-shadow: inset 0 -2px 0 0 var(--red); background: var(--card); }
.fn-alertbox-msg {
    display: flex; align-items: center; gap: 8px; margin: 0;
    padding: 12px 14px; font-weight: 600; font-size: .9rem;
}
.fn-alertbox-msg.is-success { background: var(--open-soft); color: var(--open); border-left: 3px solid var(--open); }
.fn-alertbox-msg.is-success i { font-size: 1.2em; }
.fn-alertbox-msg.is-error { background: var(--warn-soft); color: var(--warn); border-left: 3px solid var(--warn); margin-bottom: 12px; }
.fn-alertbox-fine { margin: 10px 0 0; font-family: var(--mono); font-size: .64rem; letter-spacing: .06em; color: var(--ink-3); }

/* =========================================================
   PAGINATION / SIBLINGS / FAQ
   ========================================================= */
.fn-pagination {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px;
    margin-top: clamp(1.4rem, 3vw, 2rem); padding-top: 14px; border-top: 1px solid var(--rule);
}
.fn-pagination-count { font-family: var(--mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.fn-pagination-count em { color: var(--red-ink); font-weight: 600; font-style: normal; }
.fn-pagination-actions { display: flex; gap: 10px; }

.fn-siblings { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: clamp(1.4rem, 3vw, 2rem); }
.fn-siblings-label { font-family: var(--mono); font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.fn-siblings a {
    padding: 7px 13px; background: var(--card); border: 1px solid var(--rule);
    color: var(--ink); text-decoration: none; font-family: var(--mono); font-size: .76rem; font-weight: 500;
    transition: border-color .14s var(--ease);
}
.fn-siblings a:hover { border-color: var(--ink); }

.fn-faq { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 12px; border-top: 2px solid var(--ink); }
.fn-faq > h2 { font-family: var(--serif); font-weight: 640; font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin: 0 0 14px; color: var(--ink); }
.fn-faq-item { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.fn-faq-q { font-family: var(--serif); font-weight: 640; font-size: 1.04rem; color: var(--ink); margin: 0 0 6px; }
.fn-faq-q::before { content: 'Q.'; margin-right: 8px; color: var(--red); font-family: var(--mono); font-weight: 600; font-size: .85em; }
.fn-faq-a { color: var(--ink-2); font-size: .93rem; line-height: 1.65; margin: 0; }

/* =========================================================
   SIDEBAR — table of contents
   ========================================================= */
.fn-side { position: sticky; top: calc(var(--nav-height) + 16px); display: flex; flex-direction: column; gap: 16px; }
.fn-side-block { padding: 16px 18px; background: var(--card); border: 1px solid var(--rule); border-top: 2px solid var(--ink); }
.fn-side-title {
    font-family: var(--mono); font-size: .6rem; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; color: var(--ink); margin-bottom: 10px;
}
.fn-side-list { list-style: none; display: flex; flex-direction: column; gap: 0; padding: 0; margin: 0; }
.fn-side-list a {
    display: block; padding: 7px 2px; color: var(--ink-2); text-decoration: none;
    font-size: .86rem; font-weight: 500; border-bottom: 1px dotted var(--rule);
    transition: color .14s var(--ease), padding-left .14s var(--ease);
}
.fn-side-list li:last-child a { border-bottom: none; }
.fn-side-list a:hover { color: var(--ink); padding-left: 6px; }
.fn-side-list a.active { color: var(--red-ink); font-weight: 600; }
.fn-side-list a.active::before { content: '▸ '; }

.fn-side-callout { position: relative; padding: 20px; background: var(--ink); color: var(--paper); overflow: hidden; }
.fn-side-callout h3 { font-family: var(--serif); font-weight: 640; font-size: 1.3rem; margin: 0 0 8px; color: var(--paper); }
.fn-side-callout h3 em { color: var(--red-soft); font-style: italic; }
.fn-side-callout p { font-size: .85rem; color: #CFC8B6; line-height: 1.55; margin: 0 0 14px; }
.fn-side-callout .fn-btn { width: 100%; background: var(--red); border-color: var(--red); color: var(--paper); }
.fn-side-callout .fn-btn:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); box-shadow: none; }

.fn-legend { list-style: none; display: flex; flex-direction: column; gap: 11px; padding: 0; margin: 0; }
.fn-legend li { display: flex; flex-direction: column; gap: 4px; }
.fn-legend-pill { width: fit-content; font-size: .56rem; padding: 2px 8px; }
.fn-legend-desc { font-size: .76rem; color: var(--ink-3); line-height: 1.45; }
.fn-legend-fresh { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: .74rem; color: var(--ink-2); }
.fn-legend-fresh span { display: inline-flex; align-items: center; gap: 6px; }
.fn-side-trust {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 13px;
    color: var(--red-ink); font-family: var(--mono); font-size: .7rem; font-weight: 600;
    letter-spacing: .04em; text-decoration: none; border-bottom: 1px dotted var(--red-ink); padding-bottom: 1px;
}
.fn-side-trust:hover { border-bottom-style: solid; }

/* =========================================================
   EXPLORE (SEO links) — the classifieds
   ========================================================= */
.fn-explore { padding: clamp(2.2rem, 5vw, 3.4rem) 0; border-top: 2px solid var(--ink); }
.fn-explore-head { max-width: 64ch; margin-bottom: clamp(1.4rem, 3vw, 2rem); }
.fn-explore-head .fn-label { font-family: var(--mono); font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--red-ink); }
.fn-explore-lead { margin-top: 10px; color: var(--ink-2); line-height: 1.6; }
.fn-explore-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(1.4rem, 3vw, 2.4rem); }
.fn-explore-block + .fn-explore-block { border-left: 1px solid var(--rule); padding-left: clamp(1.4rem, 3vw, 2.4rem); }
.fn-explore-title {
    font-family: var(--mono); font-weight: 600; font-size: .72rem;
    letter-spacing: .14em; text-transform: uppercase;
    margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); color: var(--ink);
}
.fn-explore-list { list-style: none; display: flex; flex-direction: column; gap: 11px; padding: 0; margin: 0; }
.fn-explore-list li { display: flex; flex-direction: column; gap: 3px; }
.fn-explore-list strong a { color: var(--ink); text-decoration: none; font-family: var(--serif); font-size: 1rem; font-weight: 640; }
.fn-explore-list strong a:hover { color: var(--red-ink); }
.fn-explore-list > li > span { font-family: var(--mono); font-size: .74rem; color: var(--ink-3); }
.fn-explore-list > li > span a { color: var(--ink-2); text-decoration: none; }
.fn-explore-list > li > span a:hover { color: var(--red-ink); text-decoration: underline; }
.fn-explore-list > li > span a.active { color: var(--red-ink); font-weight: 600; }

/* =========================================================
   ORGANIZER BAND — the house advertisement
   ========================================================= */
.fn-organizer { position: relative; padding: clamp(2.4rem, 5vw, 4rem) 0; background: var(--ink); color: var(--paper); overflow: hidden; }
.fn-organizer::before { content: ''; position: absolute; top: -130px; right: -90px; width: 340px; height: 340px; border-radius: 50%; background: var(--red); filter: blur(110px); opacity: .22; }
.fn-organizer-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: center; }
.fn-organizer-eyebrow, .fn-organizer-card-eyebrow {
    font-family: var(--mono); font-size: .6rem; font-weight: 600;
    letter-spacing: .2em; text-transform: uppercase; color: var(--red-soft); margin-bottom: 12px;
}
.fn-organizer h2 { font-family: var(--serif); font-weight: 640; font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.04; letter-spacing: -.01em; margin: 0 0 14px; color: var(--paper); }
.fn-organizer h2 em { color: var(--red-soft); font-style: italic; }
.fn-organizer-grid > div > p { color: #CFC8B6; font-size: 1rem; line-height: 1.65; max-width: 48ch; margin: 0 0 18px; }
.fn-organizer-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.fn-organizer-actions .fn-btn { background: var(--red); border-color: var(--red); color: var(--paper); }
.fn-organizer-actions .fn-btn:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); box-shadow: none; }
.fn-organizer-actions .fn-btn-outline { background: transparent; border-color: #6E685A; color: var(--paper); }
.fn-organizer-actions .fn-btn-outline:hover { background: transparent; border-color: var(--paper); color: var(--paper); box-shadow: none; transform: none; }

.fn-organizer-card { padding: clamp(1.6rem, 3vw, 2.2rem); background: transparent; border: 1px solid #57523F; }
.fn-organizer-card h3 { font-family: var(--serif); font-weight: 640; font-size: 1.4rem; margin: 0 0 16px; color: var(--paper); }
.fn-organizer-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; padding: 0; }
.fn-organizer-list li { position: relative; padding-left: 26px; color: #DAD4C2; font-size: .92rem; line-height: 1.5; }
.fn-organizer-list li::before { content: '✓'; position: absolute; left: 0; top: 1px; color: var(--red-soft); font-family: var(--mono); font-weight: 600; }
.fn-organizer-card-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.fn-organizer-card-cta .fn-btn { background: var(--red); border-color: var(--red); color: var(--paper); }
.fn-organizer-card-cta .fn-btn:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); box-shadow: none; }
.fn-organizer-card-cta .fn-btn-outline { background: transparent; border-color: #6E685A; color: var(--paper); }
.fn-organizer-card-cta .fn-btn-outline:hover { background: transparent; border-color: var(--paper); color: var(--paper); }

/* =========================================================
   COMPARE TRIGGER + DRAWER — the ledger
   ========================================================= */
.fn-compare-trigger {
    position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 60;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 22px; border: 1.5px solid var(--ink); border-radius: 0;
    background: var(--ink); color: var(--paper);
    font-family: var(--mono); font-weight: 600; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
    cursor: pointer; box-shadow: 4px 4px 0 0 rgba(28,26,21,.25);
    transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.fn-compare-trigger:hover { transform: translateX(-50%) translate(-1px, -1px); box-shadow: 6px 6px 0 0 rgba(28,26,21,.25); }
.fn-compare-trigger:active { transform: translateX(-50%) translate(1px, 1px); box-shadow: none; }
.fn-compare-trigger .fn-compare-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 6px;
    background: var(--red); font-size: .74rem;
}

.fn-compare-drawer, .fn-mfilters-sheet { position: fixed; inset: 0; z-index: 200; }
.fn-compare-drawer[hidden], .fn-mfilters-sheet[hidden] { display: none; }
.fn-compare-backdrop, .fn-mfilters-backdrop { position: absolute; inset: 0; background: rgba(28,26,21,.55); animation: fn-fade .2s var(--ease); }
@keyframes fn-fade { from { opacity: 0; } to { opacity: 1; } }
.fn-compare-panel, .fn-mfilters-panel {
    position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh;
    display: flex; flex-direction: column;
    background: var(--paper); border-top: 2px solid var(--ink);
    animation: fn-rise .3s var(--ease);
}
@keyframes fn-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
.fn-compare-head, .fn-mfilters-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--ink); }
.fn-compare-head > div { display: flex; align-items: center; gap: 10px; }
.fn-compare-title, .fn-mfilters-title { font-family: var(--serif); font-weight: 640; font-size: 1.15rem; color: var(--ink); }
.fn-compare-clear { background: none; border: none; cursor: pointer; color: var(--ink-3); font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .06em; border-bottom: 1px dotted var(--ink-3); }
.fn-compare-clear:hover { color: var(--red-ink); border-bottom-color: var(--red-ink); }
.fn-mfilters-x {
    width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--rule); background: var(--card); color: var(--ink-2); cursor: pointer; border-radius: 0;
    transition: background .14s var(--ease), color .14s var(--ease);
}
.fn-mfilters-x:hover { background: var(--ink); color: var(--paper); }
.fn-compare-body, .fn-mfilters-body { padding: 18px 22px; overflow-y: auto; }
.fn-compare-empty { color: var(--ink-3); text-align: center; padding: 48px 0; font-style: italic; }
.fn-compare-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.fn-compare-table th {
    text-align: left; font-family: var(--mono); font-size: .58rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
    padding: 8px 12px; border-bottom: 2px solid var(--ink);
}
.fn-compare-table td { padding: 12px; border-bottom: 1px solid var(--rule); color: var(--ink-2); vertical-align: middle; font-family: var(--mono); font-size: .8rem; }
.fn-compare-table td a { color: var(--ink); font-weight: 600; text-decoration: none; font-family: var(--serif); font-size: .95rem; }
.fn-compare-table td a:hover { color: var(--red-ink); text-decoration: underline; }
.fn-compare-reg {
    text-transform: uppercase; letter-spacing: .08em; padding: 2px 8px;
    border: 1.5px solid var(--open); color: var(--open);
    font-family: var(--mono); font-size: .64rem; font-weight: 600; display: inline-block; transform: rotate(-1.6deg);
}
.fn-compare-reg[data-reg="closed"] { border-color: var(--ink-3); color: var(--closed); }
.fn-compare-reg[data-reg="upcoming"], .fn-compare-reg[data-reg="waitlist"] { border-color: var(--warn); color: var(--warn); }
.fn-compare-remove {
    width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--rule); background: var(--card); color: var(--ink-3); cursor: pointer; border-radius: 0;
    transition: color .14s var(--ease), border-color .14s var(--ease);
}
.fn-compare-remove:hover { color: var(--red-ink); border-color: var(--red-ink); }

/* =========================================================
   MOBILE FILTERS
   ========================================================= */
.fn-mfilters-trigger {
    display: none; position: fixed; right: 18px; bottom: 22px; z-index: 55;
    align-items: center; gap: 9px; padding: 13px 18px;
    border: 1.5px solid var(--red-ink); border-radius: 0;
    background: var(--red); color: var(--paper);
    font-family: var(--mono); font-weight: 600; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
    cursor: pointer; box-shadow: 4px 4px 0 0 rgba(28,26,21,.25);
}
.fn-mfilters-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; background: rgba(0,0,0,.25); font-size: .7rem; }
.fn-mfilters-count.is-empty { display: none; }
.fn-mfilters-body { flex: 1; }
.fn-mfilters-body .fn-advanced { width: 100%; }
.fn-mfilters-body .fn-advanced-toggle { display: none; }
.fn-mfilters-body .fn-advanced-row { grid-template-columns: 1fr 1fr; border: none; padding: 0; margin: 0; background: transparent; }
.fn-mfilters-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ink); }

/* =========================================================
   MOTION GATING
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
    .fn-hero-stage > * { opacity: 0; animation: fn-up .55s var(--ease) forwards; }
    .fn-hero-stage > *:nth-child(1) { animation-delay: .02s; }
    .fn-hero-stage > *:nth-child(2) { animation-delay: .08s; }
    .fn-hero-stage > *:nth-child(3) { animation-delay: .14s; }
    .fn-hero-stage > *:nth-child(4) { animation-delay: .20s; }
    .fn-hero-stage > *:nth-child(5) { animation-delay: .26s; }
    @keyframes fn-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
    /* the tiles block animates its children, so let the block itself appear instantly */
    .fn-hero-stage > .fn-tiles { opacity: 1; animation: none; }
}
@media (prefers-reduced-motion: reduce) {
    .fn-tile, .fn-ball, .fn-hero-stage > *, .fn-search-pulse, .fn-chip-near.is-locating i { animation: none !important; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1040px) {
    .fn-results-wrap { grid-template-columns: 1fr; }
    .fn-side { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
    .fn-organizer-grid { grid-template-columns: 1fr; }
    .fn-explore-block + .fn-explore-block { border-left: none; padding-left: 0; }
}
@media (max-width: 760px) {
    .fn-search-bar { grid-template-columns: 1fr; }
    .fn-search-bar .fn-field { border-right: none; border-bottom: 1px solid var(--rule); }
    .fn-search-bar .fn-field input, .fn-search-bar .fn-field select { height: 54px; }
    .fn-search-bar .finder-apply-button { width: 100%; border-left: none; padding: 1rem 0; }
    .fn-search-reset { justify-self: center; }
    .fn-advanced-row { grid-template-columns: 1fr 1fr; }
    .fn-advanced { width: 100%; }
    .fn-mfilters-trigger { display: inline-flex; }
    .fn-advanced-section { display: none; }
    .fn-tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
    .fn-tile { min-height: 132px; padding: 14px; }
    .fn-tile-ghost { font-size: 5.4rem; }
    .fn-scope-stats { width: 100%; }
    .fn-scope-stat { flex: 1 1 auto; }
}
@media (max-width: 540px) {
    .fn-grid { grid-template-columns: 1fr; }
    .fn-result-board { align-items: flex-start; }
    .fn-result-counts { width: 100%; }
    .fn-result-count-item { flex: 1; }
    .fn-card::before { display: none; }
    .fn-compare-table thead { display: none; }
    .fn-compare-table, .fn-compare-table tbody, .fn-compare-table tr, .fn-compare-table td { display: block; width: 100%; }
    .fn-compare-table tr { padding: 8px 0; border-bottom: 1px solid var(--ink); }
    .fn-compare-table td { border: none; padding: 4px 0; }
    .fn-alertbox { padding: 20px 16px; }
    .fn-alertbox-form .fn-btn { width: 100%; }
    .fn-coverage-grid { grid-template-columns: 1fr; }
}